Progressbar funktioniert nicht beim Scrollen

Question

Ich arbeite an einem Modul, wo, wenn ein Benutzer PDF-Dateien in einem Container liest, der Fortschrittsbalken den Effekt basierend auf der Bildlaufleiste des Containers zeigt. Irgendwie hat die Fortschrittsleiste keinen Effekt, wenn der Benutzer nach unten oder oben scrollt.

Hier ist mein HTML-Teil für sie,

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

Und hier geht meine JS für rolle,

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

ich viel ausprobiert haben und sah oft aber scheint es keinen Erfolg ist auf dieser Teil. Kann jemand vorschlagen, wo der fehlende Teil ist und warum er nicht die gewünschten Ergebnisse zeigt? Ich bin ein Neuling in JS und kämpfe darum, zu verwalten. Jeder Rat oder jede Hilfe wird sehr geschätzt. Danke im Voraus.

Answer 1

Hier ist ein funktionierendes Beispiel:

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>

Answer 2

Ich denke, Ihr Problem ist, dass Sie den Bildlauflistener zum Viewer hinzufügen, und der Viewer hat keine Bildlaufleiste, was bedeutet, dass das Ereignis nicht in diesem div ausgelöst wird, es auf das Fenster oder einen übergeordneten Container ausgelöst wird Element, denn wenn ich diesen Stil für den Betrachter hinzufügen, snipet der Code funktioniert

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

feinen

Deshalb schlage ich für Sie, um das Element zu suchen, was die Bildlaufleiste und den Ereignis-Listener (vielleicht zu diesem Element hinzufügen Sie müssen die Berechnungen umschreiben, aber das ist eine Lösung), oder Sie geben Ihrem div eine Höhe.