现在部分浏览器已支持自定义滚动条,成了设计师和完美主义者的救星。
新版上线后,设计师又提了个新需求:
把导航栏右侧的滚动条,在不滚动时隐藏掉(同时还发了个小视频表示效果)。就是下图中右侧的粗线:
![](https://yqfile.alicdn.com/img_06f8660523f351442444f5cc1e4434a6.jpeg?x-oss-process=image/resize,w_1400/format,webp)
在mac系统下测试了Chrome/Safari/Firefox浏览器,发现这些系统在默认情况下,不滚动时滚动条是隐藏的。如下图
![](https://yqfile.alicdn.com/img_bf40091ed8ae97b191a7a085f8f14160.jpeg?x-oss-process=image/resize,w_1400/format,webp)
原来是自定义滚动条屏蔽了系统的这一特性。
解决方案:
将外包裹层默认设置为overflow-y: hidden; 同时设置hover效果时overflow: auto;
如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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: #fff; } /* 滚动条的内层滑轨背景颜色 */ .scrollbar::-webkit-scrollbar-track { background-color: #fff; } /* 滚动条的外层滑轨背景颜色 */ .scrollbar::-webkit-scrollbar-thumb { background-color: #d4d8e2; } /* 滚动条的内层滑块颜色 */ .scrollbar::-webkit-scrollbar-button { background-color: #fff; display: none; } /* 滑轨两头的监听按钮颜色 */ </style> </head> <body> <div class="content scrollbar"> <p>内容1</p> <p>内容2</p> <p>内容3</p> <p>内容4</p> <p>内容5</p> <p>内容6</p> <p>内容7</p> </div> </body> </html>