无法更改滚动条值

Question

我编写了一个简单的代码来更改滚动条的值以及document.scrollTop，但我无法让它工作。

var scroll = document.scrollTop; 
var container = document.getElementById('test');
container.innerHTML = scroll;

 var pb = document.getElementById('progress-bar');
 pb.value = 2;
 var change = function()
 {   pb.value = 2;
     pb.value++;
 };

 if (scroll > 0){
     change();
 };

谁能告诉我哪里出错了？

Answer 1

问题：

您没有在帖子中分享很多细节，但从您发布的内容中我们可以注意到您当前的代码存在一些问题：

• 如 cmets 中所述，您需要使用 document.body.scrollTop 因为document.scrollTop 是undefined，因为滚动已附加 记录 body 而不是 document 本身。
• 使用您的实际代码不会更改进度条值，因为change() 函数未附加到任何事件，而只是在文档加载时调用。

解决方案：

如果要在页面滚动时更改进度条值，需要在body的onscroll事件中进行。

演示：

我制作了一个示例演示，向您展示它应该如何工作，以及当我们在视图中滚动时进度条是如何变化的：

document.body.onscroll = function() {
  var pb = document.getElementById('progress-bar');
  var fullHeight = document.body.scrollHeight;
  var value = 100 - (document.body.scrollTop / fullHeight) * 100;
  pb.value = value;
};

#progress-bar {
  margin-top: 200px;
}

<div style="width:250px; height:1400px">
  <progress id="progress-bar" value="100" max="100"></progress>
</div>

上述函数附加到document.body 的onscroll 事件，每当滚动正文时，它都会计算滚动高度（document.body.scrollTop）与完全可滚动高度（document.body.scrollHeight）的比较，并将其放入进度条中的值。