移動端橫向商品瀏覽、橫向滑動廣告位(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% = 330pxoverflow-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;}} }

?

轉載于:https://www.cnblogs.com/taohuaya/p/9939910.html

總結

以上是生活随笔為你收集整理的移动端去除横向滚动条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。