CSS 实现隐藏滚动条同时又可以滚动

75 阅读 0 评论 50 点赞

我是靠谱客的博主鲜艳仙人掌，最近开发中收集的这篇文章主要介绍CSS 实现隐藏滚动条同时又可以滚动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

应用如下 CSS 可以隐藏滚动条：

.element::-webkit-scrollbar {display:none}

如果要兼容 PC 其他浏览器（IE、Firefox 等），国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 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;
}