进度不工作的滚动

我在哪里，当用户在一个容器中读取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的新手，并在这方面努力进行管理。任何建议或帮助将不胜感激。提前致谢。

来源

2017-08-29 Ansh

你的代码工作得很好=）https://codepen.io/RudManusachi/pen/VzENXE 或许真的错CSS？ –

这里是一个工作示例：

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

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

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

来源

2017-08-29 06:32:37 adda82

感谢宝贵的时间。我无法在CSS中找到此特定的#viewer。我能用这个课程得到这个吗？我需要什么样的变化，使@ adda82 – Ansh

关键是要增加固定的高度和溢出：隐藏到滚动元素。在我的例子中是#viewer。我想你会在这个元素中有pdf。然后你会看到滚动，你已经有滚动触发的JavaScript函数。希望有所帮助。 – adda82

没有成功，但@ adda82 – Ansh

我觉得你的问题是，您添加滚动监听器，浏览器，观众没有滚动条，这意味着什么，该事件没有在该专区发射，它的窗口或一些父容器上发射元素，因为如果我这种风格添加到浏览器的一小段代码片段工作正常

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

所以我建议你，去搜一下有滚动条的项目和事件侦听器添加到元素（也许你需要重写计算，但这是一个解决方案），或者你给你的div一个高度。

来源

2017-08-29 06:19:09

感谢您宝贵的时间。我无法在CSS中找到此特定的#viewer。我能用这个课程得到这个吗？什么样的变化，我需要让我 – Ansh

真的不知道你的CSS是如何工作的，因为主要的事情是，你需要让你的DIV滚动能力。但你可以添加我写给你的css文件，并相应地改变你的设计高度 –

进度不工作的滚动

回答

相关问题