纯CSS实现隐藏滚动条但仍具有滚动的效果
移动端移动端页面只要兼容 Chrome 和 Safari 就够了,所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 element::-webkit-scrollbar { display: none; } PC 端PC 端对兼容性的要求相对来说要高一点,可以换一种方法,大致思路就是在内容div外面包一个父容器div,设置...
移动端
移动端页面只要兼容 Chrome 和 Safari 就够了,所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。
element::-webkit-scrollbar {
display: none;
}
PC 端
PC 端对兼容性的要求相对来说要高一点,可以换一种方法,大致思路就是在内容div外面包一个父容器div,设置 overflow: hidden,内容div设置 display-x: hidden; display-y: auto; 最后设置父容器div的宽度小于内容div的宽度或者设置内容div的 margin-right 为负值就可以了。
html部分:
<div class="outer">
<div class="content">...</div>
</div>
css部分:
.outer {
width: 300px;
height: 300px;
overflow: hidden;
.content {
width: 330px;(宽高一定要定义)
/*margin-right: -15px;*/
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
}
更多推荐
所有评论(0)