移动端去除横向滚动条

移动端横向商品浏览、横向滑动广告位(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;
    }
  }
}