我正在设置一个跨浏览器工作的自定义滚动条，但我的问题是它只应用于正文(它是静态的(，而不是列为"内容"的div滚动区域。我相信问题出在HTML末尾的javascript上，但我无法解开它
HTML如下：
<body>
<div class="banner">
<video autoplay="" muted="false" loop="">
<source src="Media/BackgroundClip.mp4" type="video/mp4">
</video>
<div class="content">
<header> <img src="Media/DOE_TMP.gif"> </header>
<div class="content-wrapper">
<div id="progressbar"></div>
<div id="scrollPath"></div>
<img src="Media/Dialogue4.png">
<div class="text-wrapper">
>>>CONTENT
</div>
</div>
</div>
<script type="text/javascript">
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>
</body>
使用的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, #00ffe6);
animation: animate 5s linear infinite;
}
@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, #00ffe6);
filter: blur(10px);
}
#progressbar:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(30px);
}
提前感谢你，
贝蒂。
您正在使用progressbar的位置：'fixed'。它应该是绝对的，并且父元素(.content(必须不是静态元素(例如：相对元素(。你可以在这里查看：自定义滚动条
::-webkit-scrollbar{
width: 0;
}
#scrollpath {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255,255,255,0.05);
}
#progressbar {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
animation: animate 5s linear infinite;
}
@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, #00ffe6);
filter: blur(10px);
}
#progressbar:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe6);
filter: blur(30px);
}
.content {
position: relative
}