使用CSS隱藏元素滾動條
如何隱藏滾動條,同時仍然可以在任何元素上滾動?
首先,如果需要隱藏滾動條並在內容溢位時顯示滾動條,只需要設定overflow:auto樣式即可。想要完全隱藏滾動條只需設定overflow:hidden即可,但是這樣一來將導致元素內容不可滾動。時至今日,還沒有任何一條CSS規則可以使元素可以隱藏滾動條的同時依然可以滾動內容,只能通過針對特定瀏覽器設定滾動條樣式來實現。
Chrome和Safari瀏覽器
對於Chrome和Safari瀏覽器,我們必須使用CSS滾動條選擇器,然後使用display:none隱藏它:
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Firefox瀏覽器
對於Firefox,我們可以將滾動條寬度設定為none:
scrollbar-width: none; /* Firefox */
IE瀏覽器
對於IE,我們需要使用-ms-prefix屬性定義滾動條樣式:
-ms-overflow-style: none; /* IE 10+ */
注意:當你要隱藏滾動條的時候,最好將overflow顯示設定為auto或者scroll保證內容是可滾動的。
示例
我們使用上面的CSS屬性以及溢位實現下面一個例項——隱藏水平滾動條,同時允許垂直滾動條:
.demo::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.demo {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}
相關文章
- css隱藏滾動條CSS
- css隱藏滾動條並可以滾動CSS
- css實現隱藏滾動條並可以滾動內容CSS
- 隱藏滾動條保留滾動效果
- 3種方法實現CSS隱藏滾動條並可以滾動內容CSS
- 記一次滾動條隱藏
- CSS隱藏元素方法CSS
- chrome,firfox,IE實現隱藏滾動條但是可以正常滾動(瀏覽器自帶隱藏屬性實現)Chrome瀏覽器
- CSS滾動條美化CSS
- 有趣的css—隱藏元素的7種思路CSS
- 直播軟體app開發,CSS超出隱藏並且能滾動APPCSS
- 如何隱藏scroll-Y縱向滾動條,並不影響內容滾動的方法
- 【CSS】CSS 世界 — 元素的顯示與隱藏學習總結CSS
- 藍獅主管:641480+滾動條顯示和隱藏的幾個方法
- 純css美化滾動條樣式CSS
- CSS 小結筆記之元素的隱藏與顯示CSS筆記
- css li元素中的文字超出隱藏不換行效果CSS
- 隱藏元素兩種方式
- css滾動條設定(選擇器)CSS
- CSS3滾動條效果程式碼CSSS3
- 直播帶貨原始碼,css隱藏捲軸,但使超出部分任然可以滾動原始碼CSS
- 萬彩動畫大師教程 | 隱藏元素物件動畫物件
- jQuery 判斷元素是否隱藏jQuery
- jQuery隱藏一個div元素jQuery
- css 改變scroll滾動條的樣式CSS
- html/css 滾動到元素位置,顯示載入動畫HTMLCSS動畫
- 手機直播原始碼,滾動條在滑動時顯示,靜止時恢復隱藏狀態原始碼
- css實現修改預設滾動條樣式CSS
- JavaScript動畫方式控制div元素的隱藏和顯示JavaScript動畫
- 使用 hide和 show方法來隱藏和顯示 HTML 元素IDEHTML
- 使用js控制滾動條的位置JS
- CSS 讓滾動條不佔用螢幕寬度CSS
- 不可思議的純 CSS 滾動進度條效果CSS
- div滾動條樣式,水平滾動
- Vue實現浮動按鈕元件 - 頁面滾動時自動隱藏 - 可拖拽Vue元件
- html元素滾動定位方法HTML
- 元素的隱藏和顯示(display ,visibility ,overflow)
- 動態控制C4C UI元素的顯示和隱藏UI