我的 WordPress 网站中的滚动指示器不起作用？

Question

我正在设计一个网站，我想为我的博客页面创建一个滚动指示器。事实上，我几个月前就做了这样的事情，但是无论我做什么，我都没有得到结果，所以事实上，我放弃了滚动指示器部分，开始设计其他的部件和组件，直到我回来改天又解决了问题，但是今天回来还是不行！ 我使用这个代码：

<div class="progress-container">
    <div class="progress-bar" id="Scroll_Indicator_blog"></div>
</div>

// scroll bar script
window.onscroll = function () {
    Scroll_Indicator_blog_function()
};

function Scroll_Indicator_blog_function() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("Scroll_Indicator_blog").style.width = scrolled + "%";
}

.progress-container {
    position: fixed;
    top: 0;

    display: block;
    width: 100%;
    height: 8px;
    background: var(--vesal-background-color7);
    z-index: 9999;
}
.progress-bar {
    height: 100%;
    background: var(--vesal-background-color2);
    box-shadow: 0 5px 10px 0 var(--vesal-boxshadow-color-1);
    width: 0%;
    transition: ease-in-out 0.5s;
}

我几乎尝试了所有我能想到的方法。事实上，如果您检查我的网站，您会发现通过更改 width: 0% 并将其增加到另一个百分比，上述指示从页面读取的量的黄金线显示正确，所以我几乎可以肯定问题出在js部分，或者是否需要一个特殊的库来执行这个过程？当然，我必须说，我在这一部分的整体设计中使用了w3s，我将在下面发布链接。谢谢你指导我 https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

Answer 1

在一位指导我的朋友的帮助下，我修改了这样的js代码：

window.onscroll = function () {
    Scroll_Indicator_blog_function()
};

function Scroll_Indicator_blog_function() {
    var winScroll = document.body.scrollTop || document.body.scrollTop;
    var height = document.body.scrollHeight - document.body.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("Scroll_Indicator_blog").style.width = scrolled + "%";
}

.progress-container {
    position: fixed;
    top: 0;

    display: block;
    width: 100%;
    height: 8px;
    background: var(--vesal-background-color7);
    z-index: 9999;
}
.progress-bar {
    height: 100%;
    background: var(--vesal-background-color2);
    box-shadow: 0 5px 10px 0 var(--vesal-boxshadow-color-1);
    width: 0%;
    transition: ease-in-out 0.5s;
}

<div class="progress-container">
    <div class="progress-bar" id="Scroll_Indicator_blog"></div>
</div>

但是现在我遇到了新问题！ 在这个脚本计算的高度中，高度是从Mojo帐户的最高点一直延续到页面底部，即从页眉顶部到页脚底部，这自然没有什么意思来展示如何读者已经阅读了大部分内容！ 如何才能使高度仅限于有问题的部分，即，例如，它计算页面从一个部分的开头到结尾的高度，而不计算评论部分、标题和页脚？ 再次感谢您的建议