移動(dòng)端橫向商品瀏覽、橫向滑動(dòng)廣告位(CSS實(shí)現(xiàn))

在手機(jī)上逛一些電商網(wǎng)站或者其他相同類型的網(wǎng)站時(shí)，會(huì)遇到橫向滑動(dòng)的商品。如京東、淘寶等電商網(wǎng)站下。我們知道，這一般情況下為某個(gè)元素設(shè)置overflow: auto做到，表示橫向或者豎向依據(jù)內(nèi)容的多少自動(dòng)出現(xiàn)滾動(dòng)條。但是，在頁面中間出現(xiàn)橫向滾動(dòng)條是十分不好看的..

在不使用任何插件的情況下，可以使用原生CSS的方法來解決這個(gè)問題。

-webkit-scrollbar

移動(dòng)端webkit內(nèi)核的瀏覽器可以使用自定義滾動(dòng)條的偽對象選擇器::-webkit-scrllbar。這同::after, ::before差不多。但是-webkit-scrollbar存在瀏覽器兼容性問題。

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

Styling Scrollbars

Custom Scrollbars in WebKit

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

overflow-x

當(dāng)然，同樣使用overflow方法來解決，但是需要一點(diǎn)小技巧。思路如下。

• 父元素設(shè)置overflow:hidden屬性，可以設(shè)置高度，也可以不設(shè)置高度，具體還是要看具體實(shí)現(xiàn)的場景。這里需要明白的一點(diǎn)是，在沒有overflow: hidden屬性下，當(dāng)子元素的高度超過父元素的高度時(shí)，父元素的高度會(huì)被子元素?fù)胃?#xff1b;在設(shè)置了overflow: hidden屬性的情況下，當(dāng)子元素的高度超過父元素的高度時(shí)，超過的部分會(huì)被剪裁掉。如果有不理解的,就再多讀幾次..因?yàn)榇朔椒ň褪抢眠@個(gè)原理
• 子元素設(shè)置高度，并且高度要大于父元素的高度。同時(shí)設(shè)置overflow-x: auto; white-space: nowrap;也就是說，需要設(shè)置三個(gè)屬性：

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

上面我們說到，父元素設(shè)置的overflow屬性會(huì)把超過的部分剪裁掉。而在子元素中，由于實(shí)際內(nèi)容的寬度是大于移動(dòng)設(shè)備的寬度的，因此此時(shí)必須產(chǎn)生橫向滾動(dòng)條。由于子元素的高度大于父元素的高度，超過父元素的高度的內(nèi)容被剪裁。因此，子元素的滾動(dòng)條就被剪裁掉了。同時(shí)也不會(huì)影響其他內(nèi)容的顯示。IE9及以上的瀏覽器都支持。

使用這種原生CSS的方式而不引入插件的好處在于CSS文件大小變小了，用戶體驗(yàn)也好了。具體如下。

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; // 也可以不設(shè)置高度，讓高度自適應(yīng)內(nèi)容的變化overflow: hidden; } .inner {height: 110%; // 高度實(shí)際為 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;}} }

?

轉(zhuǎn)載于:https://www.cnblogs.com/taohuaya/p/9939910.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。