實現CSS隱藏滾動條並可以滾動內容

2021-10-12 18:41:35 字數 508 閱讀 6560

class

="outer-container"

>

class

="inner-container"

>

......

div>

div>

.outer-container

.inner-container

同時該文章還分享了一種通過css隱藏滾動條的方法,不過這個方法不相容ie,做移動端的可以使用。 那就是自定義滾動條的偽物件選擇器::-webkit-scrollbar,詳情請看之前的文章:css3自定義webkit滾動條樣式 chrome 和safari

.element::-webkit-scrollbar
ie 10+

.element
firefox

.element

實現CSS隱藏滾動條並可以滾動內容

隱藏滾動條的同時還需要支援滾動,我們經常在前端開發中遇到這種情況,最容易想到的是加乙個iscroll外掛程式,但其實現在css也可以實現這個功能,我已經在很多地方使用了,下面一起看看這三種方法。方法1 計算滾動條寬度並隱藏起來 在本站的側欄,你可以看到前端 的那塊內容並沒有滾動條,但滑鼠移上去卻可以...

CSS隱藏滾動條並可以滾動內容

前言 當我們的內容超出了我們的 div,往往會出現滾動條,影響美觀,尤其是當我們在做一些導航選單的時候,滾動條一出現就破壞了 ui 效果。我們不希望出現滾動條,也不希望超出去的內容溢位,就要保留滑鼠滾動的效果。我們經常在前端開發中遇到這種情況,最容易想到的是加乙個 iscroll 外掛程式,但其實現...

CSS 實現隱藏滾動條同時又可以滾動

純css實現呢,我只能相容ie9或者以上。我用的react,你用的時候把classname換成class就行了 首先是webkit,webkit scrollbar這個偽類是很好可惜只有webkit支援。我下面說的方法是包括火狐谷歌ie 9和9 都支援,但是得用區域性滾動overflow auto ...