Javascript Progressbar无法滚动

我正在开发一个模块，当用户读取容器中的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> 

---

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

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

因此，我建议您搜索具有滚动条的项，并将事件侦听器添加到该元素（可能您需要重写计算，但这是一个解决方案），或者为div指定一个高度。
我认为您的问题是，将滚动侦听器添加到查看器，而查看器没有滚动条，这意味着事件不是在该div中激发的，而是在窗口或某个父容器元素上激发的，因为如果我将此样式添加到查看器中，代码snipet工作正常

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

因此，我建议您搜索包含滚动条的项目，并将事件侦听器添加到该元素（可能需要重写计算，但这是一个解决方案），或者为div指定一个高度。
以下是一个工作示例：


var-viewer=document.getElementById（'viewer'）；
viewer.addEventListener（'scroll'，function（）{
var s=this.scrollTop，
d=此高度，
c=这个。clientHeight，
位置=（s/（d-c））*100；
document.getElementById（'progressbar'）。值=位置；
});
#查看器{
高度：100px；
宽度：500px；
边框：1px实心#5656；
溢出x：隐藏；
溢出y：自动；
}

以下是一个工作示例：


var-viewer=document.getElementById（'viewer'）；
viewer.addEventListener（'scroll'，function（）{
var s=this.scrollTop，
d=此高度，
c=这个。clientHeight，
位置=（s/（d-c））*100；
document.getElementById（'progressbar'）。值=位置；
});
#查看器{
高度：100px；
宽度：500px；
边框：1px实心#5656；
溢出x：隐藏；
溢出y：自动；
}

您的代码工作正常=）CSS可能有问题吗？您的代码工作正常=）CSS可能有问题吗？谢谢您宝贵的时间。我在css中找不到这个特殊的查看器。我能通过课堂上的练习得到这个吗？我真的不知道你的css是如何工作的，因为最主要的是你需要让你的div可以滚动。但是你可以将我写的东西添加到你的css文件中，并根据你的设计相应地更改高度。谢谢你宝贵的时间。我在css中找不到这个特殊的查看器。我能通过课堂上的练习得到这个吗？我真的不知道你的css是如何工作的，因为最主要的是你需要让你的div可以滚动。但是你可以将我写的东西添加到你的css文件中，并根据你的设计相应地更改高度。谢谢你宝贵的时间。我在css中找不到这个特殊的查看器。我能通过课堂上的练习得到这个吗？我需要对@adda82进行哪些更改技巧是在滚动元素中添加固定高度和溢出：hidden。在我的例子中，这就是#查看器。我猜您将在这个元素中包含pdf。然后您将看到滚动，并且您已经拥有了在滚动时触发的javascript函数。希望有帮助。尚未成功@adda82I已编辑上述代码。我留下的html代码与您提供的相同，我发现php代码中有一个错误，您在变量“tbl_studymaterials”、“file_ppt”上使用了双引号，而不是单引号。现在尝试使用我的代码，看看它是否有效。别忘了为#查看器添加css代码。非常感谢您宝贵的时间伙伴。但是CSS中确实存在一些我无法找到的小故障。再次感谢您的关心。我尝试了你的解决方案，但其中没有显示内容。是的，应用时查看器的代码不显示滚动条。那么可以明确给出吗？谢谢你宝贵的时间。我在css中找不到这个特殊的查看器。我能通过课堂上的练习得到这个吗？我需要对@adda82进行哪些更改技巧是在滚动元素中添加固定高度和溢出：hidden。在我的例子中，这就是#查看器。我猜您将在这个元素中包含pdf。然后您将看到滚动，并且您已经拥有了在滚动时触发的javascript函数。希望有帮助。尚未成功@adda82I已编辑上述代码。我留下的html代码与您提供的相同，我发现php代码中有一个错误，您在变量“tbl_studymaterials”、“file_ppt”上使用了双引号，而不是单引号。现在尝试使用我的代码，看看它是否有效。别忘了为#查看器添加css代码。非常感谢您宝贵的时间伙伴。但是CSS中确实存在一些我无法找到的小故障。再次感谢您的关心。我尝试了你的解决方案，但其中没有显示内容。是的，应用时查看器的代码不显示滚动条。那么它能被明确给出吗？