网站上那些自定义的滚动条是如何实现的?

2021-07-09 11:38发布

经常进的一个网站,之前一直用谷歌浏览器打开,觉得没什么特别,就是一个普通的滚动条,用js模拟 就可以实现。如下图: 

直到有一天用ie浏览器打开这个网站时发现这个模块的滚动条变成了下面这样:

看到ie下呈现的状态时脑子里第一反应是这不是浏览器自带的那个滚动条吗,不太美观的样子。对比 chrome,同一个模块在两个浏览器下显示的滚动条样式完全不一样,如果是js模拟不应该有如此大的差 异才对。遂打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,用到的是css3新增 属性来实现的自定义滚动条,这引发了我的好奇,便开始了以下探索之路。 

首先,我们先来了解以下滚动条的各个组成部分,以下为垂直滚动条示意图:

了解清楚这几个部分之后我们简单的滚动条就可以快速实现了。 

1::-webkit-scrollbar 

可以用来定义滚动条整体部分,配合widthheight属性可以用来设置整体滚动条的宽度和高度,其中如 果是水平滚动条,则设置height属性控制滚动条竖直方向的高度即可,如果是垂直滚动条,则设置width 属性来控制所需滚动条的宽度。 

2::-webkit-scrollbar-thumb 

设置滚动条中滑块部分,及鼠标按住时可以拖动的部分,即上图中蓝色标注部分 

3::-webkit-scrollbar-track 

整个滚动条外层轨道部分,即图中灰色标注部分。 使用以上三个伪元素选择器就可以设置滚动条中各个部分的样式,非常的简单方便。

以下是代码实现过程:

<body>
    <div class="menuBar"> 
        <div class="menu"> 
            <div class="menuText"> 
                <dl>
                    <dt>互联网营销</dt>
                     <dd class="clearfix">
                        <a href="#">SEO</a>
                        <a href="#">SEM</a> 
                        <a href="#">新媒体</a> 
                        <a href="#">电商</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>互联网营销</dt> 
                    <dd class="clearfix"> 
                        <a href="#">SEO</a> 
                        <a href="#">SEM</a> 
                        <a href="#">新媒体</a> 
                        <a href="#">电商</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>web前端</dt> 
                    <dd class="clearfix"> 
                        <a href="#">在线就业班</a> 
                        <a href="#">HTML+CSS</a> 
                        <a href="#">Node</a> 
                        <a href="#">JavaScript</a> 
                        <a href="#">Vue</a> 
                        <a href="#">React</a> 
                        <a href="#">小程序</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>互联网营销</dt> 
                    <dd class="clearfix"> 
                        <a href="#">SEO</a> 
                        <a href="#">SEM</a>
                        <a href="#">新媒体</a> 
                        <a href="#">电商</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>web前端</dt> 
                    <dd class="clearfix"> 
                        <a href="#">在线就业班</a> 
                        <a href="#">HTML+CSS</a> 
                        <a href="#">Node</a> 
                        <a href="#">JavaScript</a> 
                        <a href="#">Vue</a> 
                        <a href="#">React</a> 
                        <a href="#">小程序</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>互联网营销</dt> 
                    <dd class="clearfix"> 
                        <a href="#">SEO</a> 
                        <a href="#">SEM</a> 
                        <a href="#">新媒体</a> 
                        <a href="#">电商</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>web前端</dt>
                    <dd class="clearfix"> 
                        <a href="#">在线就业班</a> 
                        <a href="#">HTML+CSS</a> 
                        <a href="#">Node</a> 
                        <a href="#">JavaScript</a> 
                        <a href="#">Vue</a> 
                        <a href="#">React</a> 
                        <a href="#">小程序</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>互联网营销</dt> 
                    <dd class="clearfix"> 
                        <a href="#">SEO</a> 
                        <a href="#">SEM</a> 
                        <a href="#">新媒体</a> 
                        <a href="#">电商</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>web前端</dt> 
                    <dd class="clearfix"> 
                        <a href="#">在线就业班</a> 
                        <a href="#">HTML+CSS</a> 
                        <a href="#">Node</a> 
                        <a href="#">JavaScript</a> 
                        <a href="#">Vue</a> 
                        <a href="#">React</a> 
                        <a href="#">小程序</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>互联网营销</dt> 
                    <dd class="clearfix"> 
                        <a href="#">SEO</a> 
                        <a href="#">SEM</a> 
                        <a href="#">新媒体</a> 
                        <a href="#">电商</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>web前端</dt> 
                    <dd class="clearfix"> 
                        <a href="#">在线就业班</a> 
                        <a href="#">HTML+CSS</a> 
                        <a href="#">Node</a> 
                        <a href="#">JavaScript</a> 
                        <a href="#">Vue</a> 
                        <a href="#">React</a> 
                        <a href="#">小程序</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>互联网营销</dt> 
                    <dd class="clearfix"> 
                        <a href="#">SEO</a> 
                        <a href="#">SEM</a> 
                        <a href="#">新媒体</a>
                        <a href="#">电商</a> 
                    </dd> 
                </dl> 
                <dl>
                    <dt>web前端</dt> 
                    <dd class="clearfix"> 
                        <a href="#">在线就业班</a> 
                        <a href="#">HTML+CSS</a> 
                        <a href="#">Node</a> 
                        <a href="#">JavaScript</a> 
                        <a href="#">Vue</a> 
                        <a href="#">React</a> 
                        <a href="#">小程序</a> 
                    </dd> 
                </dl> 
            </div> 
        </div> 
    </div>
</body>
 /* 自定义滚动条 */ 
        .menu { 
            overflow: auto; 
        }
        /*定义整个垂直滚动条显示的宽度*/ 
        .menu::-webkit-scrollbar { 
            width: 5px; 
        }
        /*设置滑动部分的背景颜色*/ 
        .menu::-webkit-scrollbar-thumb { 
            background: yellow; 
        }
        /*设置外层轨道的背景颜色*/ 
        .menu::-webkit-scrollbar-track { 
            background: gray; 
        }

通过以上代码大家可以发现,原本用js脚本需要很多行代码实现的自定义滚动条,如果用css3中新增的 这些内容来实现的话,代码量大大减少,且易于理解,但这种方式仍有局限性,大家会发现所有选择器 的前面带有-webkit-前缀,也就意味着这是webkit内核的浏览器可以识别的私有属性,其他浏览器的兼 容情况并不好,需要根据需求使用哦~