css自定义滚动条不滚动时隐藏的方法

时间：7年前阅读：5159

浏览器现在一般都已支持自定义滚动条，成了设计师和完美主义者的救星。

把导航栏右侧的滚动条，在不滚动时隐藏掉（同时还发了个小视频表示效果）。就是下图中右侧的粗线：

在mac系统下测试了Chrome／Safari／Firefox浏览器，发现这些系统在默认情况下，不滚动时滚动条是隐藏的。如下图

原来是自定义滚动条屏蔽了系统的这一特性。

解决方案：

将外包裹层默认设置为overflow-y: hidden; 同时设置hover效果时overflow: auto;

如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
  <style>
  .content{
    width: 200px;
    height: 150px;
    padding-left: 10px;
    border: 1px solid #ccc;
    overflow-y: hidden;
  }
  .content:hover{
    overflow-y: auto;
  }
  .scrollbar::-webkit-scrollbar {
    width: 2px;
  }

  .scrollbar::-webkit-scrollbar-track-piece {
    background-color: #C00000;
  } /* 滚动条的内层滑轨背景颜色 */

  .scrollbar::-webkit-scrollbar-track {
    background-color: #085820;
  } /* 滚动条的外层滑轨背景颜色 */

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: #d4d8e2;
  } /* 滚动条的内层滑块颜色 */

  .scrollbar::-webkit-scrollbar-button {
    background-color: #085820;
    display: none;
  } /* 滑轨两头的监听按钮颜色 */
  </style>
</head>
<body>
  <div class="content scrollbar">
    <p>标题01...</p>
    <p>标题02...</p>
    <p>标题03...</p>
    <p>标题04...</p>
    <p>标题05...</p>
    <p>标题06...</p>
    <p>标题07...</p>
  </div>
</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css自定义滚动条不滚动时隐藏的方法

网友评论