隐藏滚动条的方法

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

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

你可能感兴趣的:(隐藏滚动条的方法)