1. 通過 ::-webkit-scrollbar 偽元素

.inner-container::-webkit-scrollbar {display: none; } 復(fù)制代碼

簡單粗暴，但是兼容性不好

2. 外層元素 overflow: hidden 內(nèi)層元素absolute定位

// css 樣式 <style>.element, .outer-container {width: 200px;height: 200px;}.outer-container {position: relative;overflow: hidden;}.inner-container {position: absolute;overflow-x: hidden;overflow-y: scroll;} </style> // html 結(jié)構(gòu) <div class="outer-container"><div class="inner-container"><div class="element">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</div></div> </div> 復(fù)制代碼

兼容性較好，絕對(duì)布局不用計(jì)算滾動(dòng)條寬度

3. 父元素overflow: hidden, 子元素寬度 100% + 滾動(dòng)條寬度

// css 樣式 <style>.parent {width: 200px;overflow: hidden;}.child {height: 200px;width: calc(100% + 17px);overflow: auto;} </style> // html 結(jié)構(gòu) <div class="parent"><div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit.... </div> 復(fù)制代碼 兼容性好，但是需要計(jì)算滾動(dòng)條的寬度

參考
CSS 實(shí)現(xiàn)隱藏滾動(dòng)條同時(shí)又可以滾動(dòng)
CSS 隱藏滾動(dòng)條，兼容ie和chrome

總結(jié)

以上是生活随笔為你收集整理的【前端大概一分钟】css隐藏滚动条同时可以滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。