純CSS實現隱藏滾動條但仍具有滾動的效果

2021-08-15 17:17:31 字數 398 閱讀 2810

移動端頁面只要相容 chrome 和 safari 就夠了,所以可以使用自定義滾動條的偽類選擇器 ::-webkit-scrollbar 來隱藏滾動條。

.container::-webkit-scrollbar
pc 端對相容性的要求相對來說要高一點,所有可以換一種方法,大致思路就是在內容div外麵包乙個父容器div,設定 overflow: hidden,內容div設定 display-x: hidden; display-y: auto; 最後設定父容器div的寬度小於內容div的寬度或者設定內容div的 margin-right 為負值就可以了。

.outer 

}}

隱藏滾動條css3實現滾動同時隱藏滾動條

專案場景需求要在區域性實現滾動,但是滾動出現了滾動條,一瞬間感覺整個頁面都不好了,經過努力css成功實現滾動同時隱藏滾動條,廢話不多說,直接上 隱藏滾動條title ulli ulul webkit scrollbar style head 測試隱藏滾動條li 測試隱藏滾動條li 測試隱藏滾動條li...

css實現滾動並隱藏滾動條

在做網頁前端頁面時,有些場景需要實現滾動的效果,但是由於滾動條的出現,造成頁面效果有些突兀,不美觀。這時候就需要乙個既能滾動並能隱藏滾動條的效果了。1 簡單來說 需要3個盒子 2 最外層的盒子與最裡面的盒子要設定寬高 3 最外層的盒子需要設定相對定位 relative 溢位隱藏overflow hi...

CSS 隱藏滾動條

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