移動端橫向商品瀏覽、橫向滑動廣告位(CSS實現)

在手機上逛一些電商網站或者其他相同型別的網站時，會遇到橫向滑動的商品。如京東、淘寶等電商網站下。我們知道，這一般情況下為某個元素設定overflow: auto做到，表示橫向或者豎向依據內容的多少自動出現滾動條。但是，在頁面中間出現橫向滾動條是十分不好看的..

在不使用任何外掛的情況下，可以使用原生CSS的方法來解決這個問題。

-webkit-scrollbar

移動端webkit核心的瀏覽器可以使用自定義滾動條的偽物件選擇器::-webkit-scrllbar。這同::after, ::before差不多。但是-webkit-scrollbar存在瀏覽器相容性問題。

Styling Scrollbars

Custom Scrollbars in WebKit

使用方法： .selector::-webkit-scrollbar { display: none }

overflow-x

當然，同樣使用overflow方法來解決，但是需要一點小技巧。思路如下。

• 父元素設定overflow:hidden屬性，可以設定高度，也可以不設定高度，具體還是要看具體實現的場景。這裡需要明白的一點是，在沒有overflow: hidden屬性下，當子元素的高度超過父元素的高度時，父元素的高度會被子元素撐高；在設定了overflow: hidden
  屬性的情況下，當子元素的高度超過父元素的高度時，超過的部分會被剪裁掉。如果有不理解的,就再多讀幾次..因為此方法就是利用這個原理
• 子元素設定高度，並且高度要大於父元素的高度。同時設定overflow-x: auto; white-space: nowrap;也就是說，需要設定三個屬性：

height: 110%  (大於父元素的高度，百分比是基於父元素的高度設定的)
overflow-x: auto (橫線滑動的廣告)
white-space: nowrap;  (不換行)

上面我們說到，父元素設定的overflow屬性會把超過的部分剪裁掉。而在子元素中，由於實際內容的寬度是大於移動裝置的寬度的，因此此時必須產生橫向滾動條。由於子元素的高度大於父元素的高度，超過父元素的高度的內容被剪裁。因此，子元素的滾動條就被剪裁掉了。

使用這種原生CSS的方式而不引入外掛的好處在於CSS檔案大小變小了，使用者體驗也好了。具體如下。

html 
<div class="outer">
  <div class="inner">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
  </div>
</div>
css
.outer {
  height: 300px;        // 也可以不設定高度，讓高度自適應內容的變化
  overflow: hidden;
}
.inner {
  height: 110%;   // 高度實際為 300 * 110% = 330px
  overflow-x: auto;
  white-space: nowrap;
  .content {
    display: inline-block;
    width: 100px;
    height: 100%;
    background-color: lightblue;
    margin-right: 10px;
    &:last-of-type {
      margin-right: 0;
    }
  }
}

在手機上逛一些電商網站或者其他相同型別的網站時，會遇到橫向滑動的商品。如京東、淘寶等電商網站下。我們知道，這一般情況下為某個元素設定overflow: auto做到，表示橫向或者豎向依據內容的多少自動出現滾動條。但是，在頁面中間出現橫向滾動條是十分不好看的..

在不使用任何外掛的情況下，可以使用原生CSS的方法來解決這個問題。

-webkit-scrollbar

移動端webkit核心的瀏覽器可以使用自定義滾動條的偽物件選擇器::-webkit-scrllbar。這同::after, ::before差不多。但是-webkit-scrollbar存在瀏覽器相容性問題。

有興趣的可以看看以下兩篇文章，看看對其的介紹

Styling Scrollbars

Custom Scrollbars in WebKit

使用方法： .selector::-webkit-scrollbar { display: none }

overflow-x

當然，同樣使用overflow方法來解決，但是需要一點小技巧。思路如下。

• 父元素設定overflow:hidden屬性，可以設定高度，也可以不設定高度，具體還是要看具體實現的場景。這裡需要明白的一點是，在沒有overflow: hidden屬性下，當子元素的高度超過父元素的高度時，父元素的高度會被子元素撐高；在設定了overflow: hidden屬性的情況下，當子元素的高度超過父元素的高度時，超過的部分會被剪裁掉。如果有不理解的,就再多讀幾次..因為此方法就是利用這個原理
• 子元素設定高度，並且高度要大於父元素的高度。同時設定overflow-x: auto; white-space: nowrap;也就是說，需要設定三個屬性：

height: 110%  (大於父元素的高度，百分比是基於父元素的高度設定的)
overflow-x: auto (橫線滑動的廣告)
white-space: nowrap;  (不換行)

上面我們說到，父元素設定的overflow屬性會把超過的部分剪裁掉。而在子元素中，由於實際內容的寬度是大於移動裝置的寬度的，因此此時必須產生橫向滾動條。由於子元素的高度大於父元素的高度，超過父元素的高度的內容被剪裁。因此，子元素的滾動條就被剪裁掉了。同時也不會影響其他內容的顯示。IE9及以上的瀏覽器都支援。

使用這種原生CSS的方式而不引入外掛的好處在於CSS檔案大小變小了，使用者體驗也好了。具體如下。

html 
<div class="outer">
  <div class="inner">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
  </div>
</div>
css
.outer {
  height: 300px;        // 也可以不設定高度，讓高度自適應內容的變化
  overflow: hidden;
}
.inner {
  height: 110%;   // 高度實際為 300 * 110% = 330px
  overflow-x: auto;
  white-space: nowrap;
  .content {
    display: inline-block;
    width: 100px;
    height: 100%;
    background-color: lightblue;
    margin-right: 10px;
    &:last-of-type {
      margin-right: 0;
    }
  }
}