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

前端 潘老师 2个月前 (12-14) 66 ℃ (0) 扫码查看

本文主要讲解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实现滚动条隐藏,鼠标悬浮时显示的方法,希望对你有帮助。


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12561.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】