使用CSS隱藏元素滾動條

2021-10-25 08:16:36 字數 834 閱讀 2473

如何隱藏滾動條,同時仍然可以在任何元素上滾動?

首先,如果需要隱藏滾動條並在內容溢位時顯示滾動條,只需要設定overflow:auto樣式即可。想要完全隱藏滾動條只需設定overflow:hidden即可,但是這樣一來將導致元素內容不可滾動。時至今日,還沒有任何一條css規則可以使元素可以隱藏滾動條的同時依然可以滾動內容,只能通過針對特定瀏覽器設定滾動條樣式來實現。

chrome和safari瀏覽器

對於chrome和safari瀏覽器,我們必須使用css滾動條選擇器,然後使用display:none隱藏它:

::-webkit-scrollbar
firefox瀏覽器

對於firefox,我們可以將滾動條寬度設定為none:

scrollbar-width: none; /* firefox */
ie瀏覽器

對於ie,我們需要使用-ms-prefix屬性定義滾動條樣式:

-ms-overflow-style: none; /* ie 10+ */
注意:當你要隱藏滾動條的時候,最好將overflow顯示設定為auto或者scroll保證內容是可滾動的。

示例

我們使用上面的css屬性以及溢位實現下面乙個例項——隱藏水平滾動條,同時允許垂直滾動條:

.demo::-webkit-scrollbar 

.demo

CSS 隱藏滾動條

hello無論如何我都想 hello無論如何我都想 hello無論如何我都想要 hello無論如何我都想 hello無論如何我都想要對 hello無論如何我都想 hello無論如何我都想要對你 hello無論如何我都想要對你 hello無論如何我都想 hello無論如何我都想要對你 hello無論如...

CSS隱藏滾動條

移動端瀏覽器將頁面的滾動條自動隱藏,同時又保證頁面可以滾動,使用者可以手動上下翻。pc端瀏覽器不會將頁面的滾動條自動隱藏,在出現橫向滾動條時候有可能會覆蓋內容,直接隱藏橫向滾動條會導致無法橫向滾動。如何做到既隱藏滾動條,又可以橫向滾動?設想是不是可以隱藏了滾動條的大部分,留下一小部分,用來滾動檢視內...

css 隱藏滾動條

如何隱藏滾動條,同時仍然可以在任何元素上滾動?首先,如果需要隱藏滾動條並在內容溢位時顯示滾動條,只需要設定overflow auto樣式即可。想要完全隱藏滾動條只需設定overflow hidden即可,但是這樣一來將導致元素內容不可滾動。時至今日,還沒有任何一條css規則可以使元素可以隱藏滾動條的...