プログレスバーがスクロールしていない

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

は実施例である：

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

あなたの問題は、スクロールリスナーをビューアに追加し、ビューアにスクロールバーがないことです。つまり、そのdivでイベントが発生していないこと、つまりウィンドウまたは一部の親コンテナ要素、私は、見る人に

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

正常に動作しますsnipetコードをこのスタイルを追加するのであれば、私はあなたが多分（スクロールバーを持っているどのような項目を検索し、その要素にイベントリスナーを追加するために、あなたのためのお勧めしているため計算を書き直す必要がありますが解決策が必要です）、またはdivに高さを与えます。ここで