Question

我正在开发一个模块，当用户在容器中读取PDF文件时，进度条会根据该容器的滚动条显示效果。当用户向下或向上滚动时，以某种方式对进度条没有影响。

这是我的html部分，

 <div id="viewer" class="pdf-viewer" oncontextmenu="return false" data-url="../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_ppt", $chapterId) ; ?>"></div>
 <span><progress id="progressbar" value="0" max="100" width="100%"></progress></span>

这是我的JS滚动，

<script>
var viewer = document.getElementById('viewer');
viewer.addEventListener('scroll', function() {
      var s = this.scrollTop,
      d = this.scrollHeight,
      c = this.clientHeight,
      position = (s / (d - c)) * 100;     
     document.getElementById('progressbar').value = position;
});
</script>

我已经尝试了很多次并且看了很多次，但似乎这部分没有成功。有人可以建议丢失的部分在哪里以及为什么它没有显示出预期的结果。我是JS的新手，并在此努力管理。任何建议或帮助将受到高度赞赏。提前谢谢。

Answer 1

我认为您的问题是，您将滚动侦听器添加到查看器，并且查看器没有滚动条，这意味着该事件未在该div中被触发，它被触发了窗口或一些父容器元素，因为如果我将这个样式添加到查看器，代码snipet工作正常

#viewer {
  height: 300px;
  overflow: auto;
}

所以我建议您搜索项目的滚动条是什么，并将事件监听器添加到该元素（可能需要重写计算但这是一个解决方案），或者你给div一个高度。

Answer 2

这是一个有效的例子：

＆＃13;

var viewer = document.getElementById('viewer');

    viewer.addEventListener('scroll', function() {
        var s = this.scrollTop,
        d = this.scrollHeight,
        c = this.clientHeight,
        position = (s / (d - c)) * 100;
        document.getElementById('progressbar').value = position;
    });

＆＃13;

 #viewer{
      height: 100px;
      width: 500px;
      border: 1px solid #565656;
      overflow-x: hidden;
      overflow-y: auto;
    }

＆＃13;

<div id = "viewer" class = "pdf-viewer" oncontextmenu="return false" data-url="../sadmin/studyMaterial/<?php echo $db->idToField('tbl_studymaterials', 'file_ppt', $chapterId); ?>">
  aaaaaaaaaa aaaaaaaa aaaaaaaaaaa aaaaaaa aaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaa aaaaaaaa aaaaaa aaaaaaa aaaaaaaa aaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaa aaaaaaaa aaaaaaa aaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaaa aaaaaaaaa aaaaa aaaaaaaa aaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaa aaaaaaaa aaaaa aaaa aaaaaaaaaaaa aaaaaaaaa 
</div>
<span>
  <progress id="progressbar" value="0" max="100" width="100%">
  </progress>
</span>

＆＃13;

Progressbar不工作滚动

2 个答案: