css設定滾動調隱藏還是可以滾動

2021-08-28 07:46:09 字數 538 閱讀 5508

在開發過程中,有時候需要把滾動條隱藏但依然可以實現滾動效果,這個要如何實現呢?原理很簡單,只要在需要隱藏滾動條的div外面加上乙個父div,然後設定父div內容超出隱藏,同時把子div的高設定100%、寬設定為100%+滾動條的寬、overflow:auto,就可以實現滾動條隱藏依然可以滾動效果。

實現**,可以直接複製後檢視效果

將進酒唐代:李白

君不見,黃河之水天上來,奔流到海不復回。

君不見,高堂明鏡悲白髮,朝如青絲暮成雪。

人生得意須盡歡,莫使金樽空對月。

天生我材必有用,千金散盡還復來。

烹羊宰牛且為樂,會須一飲三百杯。

岑夫子,丹丘生,將進酒,杯莫停。

與君歌一曲,請君為我傾耳聽。

鐘鼓饌玉不足貴,但願長醉不復醒。

古來聖賢皆寂寞,惟有飲者留其名。

陳王昔時宴平樂,斗酒十千恣歡謔。

主人何為言少錢,徑須沽取對君酌。

五花馬,千金裘,呼兒將出換美酒,與爾同銷萬古愁。

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

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

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

移動端頁面為了更接近原生的體驗,是否可以隱藏滾動條,同時又保證頁面可以滾動?使用overflow hidden隱藏滾動條,但存在的問題是 頁面或元素失去了滾動的特性。由於只需要相容移動瀏覽器 chrome 和 safari 於是想到了自定義滾動條的偽物件選擇器 webkit scrollbar。應用...

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

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