移動端去除橫向滾動條

在手機上逛一些電商**或者其他相同型別的**時，會遇到橫向滑動的商品。如京東、**等電商**下。我們知道，這一般情況下為某個元素設定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;  (不換行)

使用這種原生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 
}}

在不使用任何外掛程式的情況下，可以使用原生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;  (不換行)

使用這種原生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...