通过伪对象选择器
.element::-webkit-scrollbar {
display:none;
}
但仅限于采用 webkit 内核,如 Chrome Safari。在 PC 端兼容问题就出现了。
通过巧妙布局和 css 特性实现同样效果
将滚动条置于内容区域外并通过 overflow: hidden 隐藏,但诟病也很明显,就是外层容器和内容区域必须固定宽高。
<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>
.outer-container,.content {
width: 200px; height: 200px;
(宽高必须有,并且还必须相等)
}
.outer-container {
overflow: hidden;
}
.inner-container {
overflow-x: hidden;
overflow-y: scroll;
}
网友评论