大家好，欢迎来到IT知识分享网。
在很多时候，滚动条的出现会严重影响我们的 UI，虽然使用 JS 可以轻松解决，但难免杀鸡焉用牛刀。其实使用 CSS 可以解决大多数问题。
实现
早期为了提升移动端浏览器的原生体验，专门为此提供了支持，我们可以通过伪对象选择器-webkit-scrollbar轻松实现，但仅限于采用 webkit 内核，如 Chrome Safari。在 PC 端兼容问题就出现了。
.element::-webkit-scrollbar {
display:none;
}
为了解决上述问题，我们可以通过巧妙布局和 css 特性实现同样效果，此方法可以刚好将滚动条置于内容区域外并通过 overflow: hidden 隐藏，但诟病也很明显，就是外层容器和内容区域必须固定宽高。
……
.outer-container,.content {
width: 200px; height: 200px;
}
.outer-container {
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute; left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
还有一种方式可以帮助我们解决上面问题，我们可以将内容区的宽度设置超出容器宽度，并通过 overflow: hidden 隐藏。
……
.container {
width: 100%;
overflow: hidden;
}
.content {
width: calc(100% + 18px);
overflow-y: scroll;
}
此方法比较简单粗暴，但也有问题，因为各个浏览器滚动条的尺寸不同，因此我们采用了一个最大值 18px，但这也导致在一些浏览器上把过多的内容区域隐藏掉。
参考：
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/24829.html
