移動端去除橫向滾動條

移動端橫向商品瀏覽、橫向滑動廣告位(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屬性會把超過的部分剪裁掉。而在子元素中，因爲實際內容的寬度是大於移動設備的寬度的，所以此時必須產生橫向滾動條。因爲子元素的高度大於父元素的高度，超過父元素的高度的內容被剪裁。所以，子元素的滾動條就被剪裁掉了。同時也不會影響其餘內容的顯示。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;
    }
  }
}