滚动条效果

实现步骤

1、隐藏默认滚动条

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

2.仿制滚动条

创建两个div，一个是滚动条的槽，一个滚动条。

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

为两个div添加css样式。

#scrollPath{
    position: fixed;
	top: 0;
	right: 0;
	width: 14px;
	height: 100%;
	background-color: rgba(194, 183, 185, 0.2);
}
#progressbar{
	position: fixed;
	top: 0;
	right: 0;
	width: 14px;
    /*height: 100%;*/
	background: linear-gradient(to top,#008aff,#00ffe7);
	animation: animate 5s linear infinite;
}

给id为progressbar的div加上动画。

hue-rotate()函数在输入图像上应用色相旋转。

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

添加一点细节，产生泛光的效果。

#progressbar:before{
	content: '';
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top,#008aff,#00ffe7);
	filter: blur(10px);
}
#progressbar::after{
	content: '';
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top,#008aff,#00ffe7);
	filter: blur(25px);
}

3.js部分控制滚动条的长度

window.innerHeight：浏览器窗口的高度。

element.scrollHeight：可以获取一个元素内容的高度，包括由于溢出导致的视图中不可见内容。

window.pageYOffset：返回文档在垂直方向已滚动的像素值。

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