css实现滚动条隐藏，鼠标悬浮时显示

本文主要讲解css如何滚动条默认隐藏，但当鼠标hover悬浮时显示滚动条，并可以用鼠标滚轮滚动内容，我们来一起看下以下的3种实现方式吧。

第1种 使用 overflow

使用 CSS 属性 overflow: hidden，这将隐藏滚动条并禁止滚动，hover时再使用 overflow: auto显示滚动条，并可以滚动。该方法适用于需要隐藏所有滚动条的情况。我们看下下面的示例代码：

<div class="container" height:50px;width:300px">
  <!-- 这里是内容 -->
     <ul>
        <li>欢迎访问www.panziye.com</li>
        <li>欢迎访问潘子夜个人博客</li>
        <li>欢迎访问潘子夜个人博客</li>
        <li>欢迎访问潘子夜个人博客</li>
    </ul>
</div>

看下css代码：

.container {
  overflow: hidden; /* 隐藏滚动条 */
}

.container:hover {
  overflow: auto; /* 鼠标 hover 时显示滚动条 */
}

注意：container一定要有固定的高度才能显示滚动条，否则内容高度要超过body高度才行。

第2种 使用 -webkit-scrollbar

我们可以使用 Webkit 私有属性 -webkit-scrollbar 和它的子属性可以自定义滚动条的样式。该方式适用于需要自定义滚动条样式的情况。案例css代码如下：

.container::-webkit-scrollbar {
  width: 0; /* 隐藏滚动条 */
}

.container:hover::-webkit-scrollbar {
  width: 20px; /* 鼠标 hover 时显示滚动条 */
}

.container::-webkit-scrollbar-thumb {
  background: #aaa; /* 滚动条thumb颜色 */
  border-radius: 5px; /* 滚动条thumb圆角 */
}

.container::-webkit-scrollbar-track {
  background: #ddd; /* 滚动条轨道颜色 */
  border-radius: 5px; /* 滚动条轨道圆角 */
}

第3种 使用 ::-webkit-scrollbar 伪类

我们还可以使用 Webkit 私有伪类 ::-webkit-scrollbar 可以自定义滚动条的样式。该方法适用于需要隐藏部分滚动条（如横向滚动条或者纵向滚动条）的情况。案例隐藏横向滚动条css代码如下：

.container {
  overflow: hidden;
}

.container::-webkit-scrollbar {
  width: 20px; /* 横向滚动条高度 */
}

.container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

.container::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 5px;
}

.container::-webkit-scrollbar-thumb:horizontal {
  background: #999; /* 横向滚动条thumb颜色 */
}

.container::-webkit-scrollbar-track:horizontal {
  background: #aaa; /* 横向滚动条轨道颜色 */
}

以上就是css实现滚动条隐藏，鼠标悬浮时显示的方法，希望对你有帮助。

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)