首页 > 代码库 > CSS3特性修改(自定义)浏览器默认滚动条

CSS3特性修改(自定义)浏览器默认滚动条

2024-09-01 05:22:49   215人阅读

前言：我们做前端时，会遇到一些需求，要求把默认浏览器的滚动条样式给改写了，诶。好好的改它干啥了，也带不来用户体验，就是好看点嘛！实现原理其实是用了伪元素，webkit的伪元素实现很强，可以把滚动条当成一个页面元素来定义，再结合一些CSS3属性，比如圆角、渐变、rgba等等。最常见的伪元素，我们最熟悉的元素之前和元素之后（::before/::after）【伪类（:hover/:link）】。这里写了一个Demo，来看看...

一、HTML

<div class="banner_box"></div>

二、CSS　

    <style>
            .banner_box {
                width: 100%;
                height: 2000px;
            }
            /*滚动条样式*/
            /*滚动条整体部分*/            
            ::-webkit-scrollbar {
                width: 8px;
            }
            /*滚动条小方块*/            
            ::-webkit-scrollbar-thumb {
                background-color: rgba(0, 0, 0, 0.6); 
                -webkit-border-radius: 5px;    /* Safari 和 Chrome */
                -moz-border-radius: 5px;    /* Firefox */
                -o-border-radius: 5px;        /* Opera */
                border-radius: 5px;
                
            }
            /*滚动轨道两端按钮*/
            ::-webkit-scrollbar-button {
                -webkit-box-shadow: inset 0 0 6px rgba(85,85,85,1); 
                /*border-radius: 10px;*/  
                background-color: #555;  
            }
            /*滚动轨道 内阴影*/            
            ::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1); 
                /*border-radius: 10px;*/  
                background-color: #F5F5F5;  
            }
     </style>

 

　三、结果

 技术分享

总结：这种CSS特性，可惜不被IE和火狐兼容，其他的都能看到结果，另外还有一种办法，通过div去改写滚动条。

CSS3特性修改(自定义)浏览器默认滚动条


联系
我们