css自定义滚动条不滚动时隐藏的方法
浏览器现在一般都已支持自定义滚动条，成了设计师和完美主义者的救星。
把导航栏右侧的滚动条，在不滚动时隐藏掉（同时还发了个小视频表示效果）。就是下图中右侧的粗线：
在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/post/7107.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
