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

<强>问题：

您尚未在帖子中分享许多详细信息，但根据您发布的内容，我们可以注意到您当前的代码中存在一些问题：

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

<强>解决方案：

如果要在滚动页面时更改进度条值，则需要在onscroll的{{1}}事件中执行此操作。

<强>演示：

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

＆＃13;

body

＆＃13;

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

＆＃13;

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

＆＃13;

上述函数附加到<div style="width:250px; height:1400px"> <progress id="progress-bar" value="100" max="100"></progress> </div>的{{1}}事件，每当滚动正文时，它会计算滚动高度（onscroll）与完全可滚动高度（document.body {1}}）并将此值放在进度条中。

无法更改滚动条值

1 个答案: