源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: css实战:网页滚动条美化代码 [打印本页]

---

作者: 欧阳锋    时间: 2022-5-21 16:21
标题: css实战:网页滚动条美化代码
css中可以做到页面滚动条美化的代码很多，但是我个人比较喜欢这一款简单的界面，喜欢的直接放在你网站页面的公共css样式中即可，方便！

(, 下载次数: 78)

上传

点击文件名下载附件

1. /*---滚动条默认显示样式--*/
   
2. ::-webkit-scrollbar-thumb {
   
3.   background-color: #999999;
   
4.   height: 50px;
   
5.   outline-offset: -2px;
   
6.   outline: 2px solid #fff;
   
7.   -webkit-border-radius: 4px;
   
8.   border: 2px solid #fff;
   
9. }
   
10. /*---鼠标点击滚动条显示样式--*/
    
11. ::-webkit-scrollbar-thumb:hover {
    
12.   background-color: #fb4446;
    
13.   height: 50px;
    
14.   -webkit-border-radius: 4px;
    
15. }
    
16. /*---滚动条大小--*/
    
17. ::-webkit-scrollbar {
    
18.   width: 8px;
    
19.   height: 8px;
    
20. }

复制代码

---

欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/)

Powered by Discuz! X3.3