移动端去除横向滚动条 移动端横向商品浏览、横向滑动广告位(CSS实现)

时间：2024-02-25 12:36:39

在手机上逛一些电商网站或者其他相同类型的网站时，会遇到横向滑动的商品。如京东、淘宝等电商网站下。我们知道，这一般情况下为某个元素设置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;
    }
  }
}

 

相关文章