如何用纯CSS打造一个不一样的滚动条-烟雨网

theme: healer-readable

前言

每次浏览网页的时候，有个东西必不可少，那就是滚动条。这时候有的同学可能会说了：这句话不对，有的网页看不到滚动条。其实吧，那并不是看不到滚动条，而是滚动条被隐藏起来了。我们反过来想想，如果没有滚动条，如何滚动更多内容呢。所以，网页的滚动条是很重要的。

不难发现，大部分网页的滚动条都是一个样式，并没有很多其他的特别元素。那么如何能让滚动条变的丰富多彩呢？接下来我来手把手教你如何用简单的方式来创造一个有个性的滚动条。

进入主题

什么时候网页才会出现滚动条？只有当内容高度大于浏览器视窗高度时才会有滚动条的出现，因此第一步我们需要有足够的内容。比如这样，用div块级元素来实现占一行，多重复一些div元素即可。

<div>不一样的有个性的滚动条</div>
<div>不一样的有个性的滚动条</div>
......
<!-- 此处省略数百条 -->

然后我们加入滚动条的元素，可以定义为progressbar以及scrollPath。

<div id="progressbar"></div>
<div id="scrollPath"></div>

完成这些前期准备后，就可以开始进入CSS阶段了。

CSS阶段

首先使用-webkit-scrollbar将原生的滚动条的宽度设置为0，因为我们需要自定义其他的滚动条样式，如果不设置为0，就会出现两种滚动条，从而产生冲突，如下图所示。

::-webkit-scrollbar{
    width: 0;
}

然后对自定义的滚动条元素进行初步样式处理，代码如下所示。

#scrollPath{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: rgba(255,255,255,0.05);
}
#progressbar{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to top,#008aff,#00ffe7);
    animation: animate 5s linear infinite;
}

这里主要是对滚动条的宽度和颜色进行了处理，前面通过-webkit-scrollbar将原生的滚动条宽度设置为0，这里将自定义的滚动条宽度设置为10px。除此之外，在progressbar里设置了动画属性，相关代码如下所示

@keyframes animate {
    0%,100%{
        filter: hue-rotate(0deg);
    }
    50%{
        filter: hue-rotate(360deg);
    }
}

简单点理解此动画的含义就是调色，使用CSS的filter滤镜中的 hue-rotate() 色调旋转滤镜。如下图所示。

这就是加入动画后的效果。完成以上CSS阶段的工作后，其实已经达到我们需要的不一样的滚动条效果了。但是如果想要让它变得更好的话，就可以交给剩下的JS部分了，因此，我们最终进入JS阶段。

JS阶段

<script>
    let progress = document.getElementById('progressbar')
    let totalHeight = document.body.scrollHeight - window.innerHeight
    window.onscroll = function(){
        let progressHeight = (window.pageYOffset / totalHeight)*100
        progress.style.height = progressHeight + '%'
    }
</script>

如果说CSS是修饰外在的工具，那么JS就是控制内在的工具了。像scrollHeight以及innerHeight这些都是浏览器自带的属性，这些属性可能不常用，但是都需要我们去额外了解。后期我会总结一下浏览器的相关属性，以供学习参考。

说回以上这段代码，这段代码其实可以作为模板代码，在很多地方都可以直接套用。它的含义就是当滑动过程中滚动条会随着内容的变化而变化。用浏览器的视窗高度减去滚动内容的高度就是需要滑动的滚动条高度。可能这么说会有点抽象，咱们直接看效果吧。

这样看大家应该就能明白了吧。CSS只是实现了滚动条的基本样式，但是基本控制还要靠JS来实现。当滑动了多少内容，就展示多少高度的滚动条，这样可以提高观赏性以及用户体验感。

最终代码

html部分

<div id="progressbar"></div>
<div id="scrollPath"></div>
内容省略

CSS部分

::-webkit-scrollbar{
    width: 0;
}
#scrollPath{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: rgba(255,255,255,0.05);
}
#progressbar{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to top,#008aff,#00ffe7);
    animation: animate 5s linear infinite;
}
@keyframes animate {
    0%,100%{
        filter: hue-rotate(0deg);
    }
    50%{
        filter: hue-rotate(360deg);
    }
}

JS部分

<script>
    let progress = document.getElementById('progressbar')
    let totalHeight = document.body.scrollHeight - window.innerHeight
    window.onscroll = function(){
        let progressHeight = (window.pageYOffset / totalHeight)*100
        progress.style.height = progressHeight + '%'
    }
</script>