隐藏滚动条的方法

这里我们使用以下自定义滚动条的伪对象选择器 ::-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;
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • “人无远虑,必有近忧。”人总是要么为目前的事情烦恼,要么为以后的事情烦恼。“富人思来年,穷人思眼前。”“人...
    明赐_bcd2阅读 3,751评论 3 2
  • 木苏苏这时就回到了南方一次。先回故乡。她没有提前和谁打招呼,因为不赶时间,也无忧体力,特意买了一趟慢火车的座票。待...
    榴莲大毛毛阅读 2,481评论 1 1
  • 各位家长朋友,大家晚上好,打扰各位一下,占用你们的一点时间。 今天幼儿园邀请家委会代表,开展了“阳光厨...
    mia麻麻阅读 3,593评论 0 0
  • 源于作者生活中类似情节即兴创作 蔡欣平 书 20170720 有人会问,女...
    cxp890224阅读 3,424评论 0 2
  • 每天都会去看看飞飞的碎碎念的文章,她的文字里充满了岁月静好的烟火气,她的美食让人垂涎欲滴。有一次留言问她是不是第一...
    温柔的霜阅读 1,733评论 2 3

友情链接更多精彩内容