移動端去除橫向滾動條

2022-02-19 07:55:45 字數 3207 閱讀 3261

在手機上逛一些電商**或者其他相同型別的**時,會遇到橫向滑動的商品。如京東、**等電商**下。我們知道,這一般情況下為某個元素設定overflow: auto做到,表示橫向或者豎向依據內容的多少自動出現滾動條。但是,在頁面中間出現橫向滾動條是十分不好看的..

在不使用任何外掛程式的情況下,可以使用原生css的方法來解決這個問題。

移動端webkit核心的瀏覽器可以使用自定義滾動條的偽物件選擇器::-webkit-scrllbar。這同::after, ::before差不多。但是-webkit-scrollbar存在瀏覽器相容性問題。

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

styling scrollbars

custom scrollbars in webkit

使用方法:.selector::-webkit-scrollbar

當然,同樣使用overflow方法來解決,但是需要一點小技巧。思路如下。

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

.inner

}}

在手機上逛一些電商**或者其他相同型別的**時,會遇到橫向滑動的商品。如京東、**等電商**下。我們知道,這一般情況下為某個元素設定overflow: auto做到,表示橫向或者豎向依據內容的多少自動出現滾動條。但是,在頁面中間出現橫向滾動條是十分不好看的..

在不使用任何外掛程式的情況下,可以使用原生css的方法來解決這個問題。

移動端webkit核心的瀏覽器可以使用自定義滾動條的偽物件選擇器::-webkit-scrllbar。這同::after, ::before差不多。但是-webkit-scrollbar存在瀏覽器相容性問題。

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

styling scrollbars

custom scrollbars in webkit

使用方法:.selector::-webkit-scrollbar

當然,同樣使用overflow方法來解決,但是需要一點小技巧。思路如下。

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

.inner

}}

去除框架橫向滾動條

在網頁上使用了frame或者iframe,使用ie6瀏覽,將可能出現非常不美觀的橫向滾動條。那麼你有可能會使用scrolling no 這個屬性,但這樣講會導致連豎向的滾動條都不見了。好,那也有可能在body標籤或css裡面定義overflow x hidden overflow y auto 這兩...

橫向滾動條無法去除

idea開發日程安排介面時,橫向滾動條無法去除,無論div或者視窗大小調整為多少,都有橫向滾動條。然後在谷歌瀏覽器中f12除錯,發現在callendar 日曆控制項 所在body有乙個邊距。這個邊距影響介面,無論視窗或者callendar所在div調整為多少,始終有乙個滾動條。解決方法 新增此段 將...

python橫向滾動條 控制滾動條

調過js指令碼控制 python 1.coding utf 8 2.from selenium import webdriver 3.import time 5.driver webdriver.firefox 6.driver.get 7.搜尋 8.driver.find element by i...