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,我们将及时处理。
微信扫码关注
更新实时通知