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

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

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

2. 外層元素 overflow: hidden 內層元素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 結構 <div class="outer-container"><div class="inner-container"><div class="element">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</div></div> </div> 復制代碼

兼容性較好，絕對布局不用計算滾動條寬度

3. 父元素overflow: hidden, 子元素寬度 100% + 滾動條寬度

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

參考
CSS 實現隱藏滾動條同時又可以滾動
CSS 隱藏滾動條，兼容ie和chrome

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。