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

2021-08-15 00:21:00 字數 723 閱讀 2636

純css實現呢,我只能相容ie9或者以上。我用的react,你用的時候把classname換成class就行了

首先是webkit,::-webkit-scrollbar這個偽類是很好可惜只有webkit支援。

我下面說的方法是包括火狐谷歌ie(9和9+)都支援,但是得用區域性滾動overflow:auto;

最簡單的demo:

<divid="root"style="width: 100%;height: 100%" >

<divclassname="outer-container">

<divclassname="inner-container">

<divclassname="container">

div>

div>

div>

div>

css:

.outer-container

.inner-container

//box-sizing一定要加啊,我之前試了n種方法就是缺了這個屬性,這是由 css2.1 規定的寬度高度行為。寬度和高度分別

應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。//

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

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

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

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

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

class outer container class inner container div div outer container inner container同時該文章還分享了一種通過css隱藏滾動條的方法,不過這個方法不相容ie,做移動端的可以使用。那就是自定義滾動條的偽物件選擇器 web...