進度不工作的滾動

我在哪裏，當用戶在一個容器中讀取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文件，並相應地改變你的設計高度 –

進度不工作的滾動

回答

相關問題