美文网首页
隐藏滚动条的方法

隐藏滚动条的方法

作者: 正在刷新log | 来源:发表于2020-01-03 10:52 被阅读0次

这里我们使用以下自定义滚动条的伪对象选择器 ::-webkit-scrollbar
.element::-webkit-scrollbar {display:none}

如果要兼容 PC 其他浏览器(IE、Firefox 等),可以使用以下方法。在容器外面再嵌套一层 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 {
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
/* for Chrome */
.inner-container::-webkit-scrollbar {
display: none;
}

相关文章

网友评论

      本文标题:隐藏滚动条的方法

      本文链接:https://www.haomeiwen.com/subject/rmhzoctx.html