【前端大概一分钟】css隐藏滚动条同时可以滚动

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隐藏滚动条同时可以滚动的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。