Javascript 将自定义滚动条CSS分配给div而不是body_Javascript_Html_Css_Webkit_Scrollbar

Javascript 将自定义滚动条CSS分配给div而不是body

javascript html css

Javascript 将自定义滚动条CSS分配给div而不是body,javascript,html,css,webkit,scrollbar,Javascript,Html,Css,Webkit,Scrollbar,我正在设置一个跨浏览器工作的自定义滚动条，但我的问题是它只应用于主体（静态），而不是作为“内容”列出的div滚动区域。我相信问题在于HTML末尾的javascript，但我无法解释它 HTML格式如下： <body> <div class="banner"> <video autoplay="" muted="false" loop="">

我正在设置一个跨浏览器工作的自定义滚动条，但我的问题是它只应用于主体（静态），而不是作为“内容”列出的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>

提前感谢大家,

贝蒂。

您正在使用progressbar的位置：“fixed”。它应该是绝对的，并且父元素（.content）必须是非静态元素（例如：relative）。您可以在这里查看：

嘿，谢谢你的建议！使位置为绝对位置使滚动条从页面侧面进入div部分，但是仍然存在两个问题：1。滚动条从正文部分读取其进度+总高度，它将其解释为100%/100%（因为正文是一个静态页面，只有div中的内容是可滚动的）我想知道，我是否应该将可滚动部分包装在一个div类中，以便在section>中具体引用它？2.默认的灰色滚动条仍然出现在Firefox中。你知道如何隐藏这个吗？这里有一张问题的图片需要澄清：嘿，谢谢你的建议！使位置为绝对位置使滚动条从页面侧面进入div部分，但是仍然存在两个问题：1。滚动条从正文部分读取其进度+总高度，它将其解释为100%/100%（因为正文是一个静态页面，只有div中的内容是可滚动的）我想知道，我是否应该将可滚动部分包装在一个div类中，以便在section>中具体引用它？2.默认的灰色滚动条仍然出现在Firefox中。你知道如何隐藏这个吗？下面是问题的图片，需要澄清：

::-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);
}

::-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
}