近期在開發 HTML 網頁時,為了避免出現雙重 Scrollbar 的情況,所以尋找了一下如何將滾動條隱藏,同時又可以保有滾動效果的方式。這邊筆記一下能夠符合眾多行動和桌機的 CSS。
內容
因應不同瀏覽器,至少會需要調整兩個 CSS 值。
1. -webkit-scrollbar:主要針對 WebKit-based 瀏覽器
2. scrollbar-width:Gecko-based 瀏覽器
至於下的地點,就是你使用 overflow: scroll 的所在位置
Chrome, Edge 等 WebKit-based
直接使用 ::-webkit-scrollbar,下 display: none
Microsoft 瀏覽器
-ms-overflow-style: none;
Firefox 等 Gecko-based
scrollbar-width: none;
參考資料
1. Using CSS to hide scrollbars without impacting scrolling
按讚加入粉絲團