Estoy tratando de hacer un indicador de progreso de desplazamiento en un elemento div . Funciona, pero solo detecta desplazamientos de ventana y no el desplazamiento de desbordamiento de div .
function myFunction() { var winScroll = document.getElementById("info").scrollTop; var height = document.getElementById("info").scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("myBar").style.width = scrolled + "%"; } window.onscroll = function() { myFunction() }; .header { position: fixed; top: auto; z-index: 1; width: 83.5%; background-color: #f1f1f1; } .progress-container { width: 100%; height: 8px; background: #ccc; } .progress-bar { height: 8px; background: #04AA6D; width: 0%; } <div name="header" class="header"> <div name="progress-container" class="progress-container"> <div name="myBar" class="progress-bar" id="myBar"></div> </div> </div> ¿Hay algún problema con mi código o tengo que reemplazar window.onscroll con otra cosa? Prefiero no usar jQuery.
El problema principal es que configura onscroll a la window , pero debe document.getElementById("info") . Vea el ejemplo a continuación:
function myFunction() { const winScroll = document.getElementById("info").scrollTop; const height = document.getElementById("info").scrollHeight - document.documentElement.clientHeight; const scrolled = (winScroll / height) * 100; document.getElementById("myBar").style.width = scrolled + "%"; } document.getElementById("info").onscroll = function() {myFunction()}; .header { position: fixed; top: auto; z-index: 1; width: 83.5%; background-color: #f1f1f1; } .progress-container { width: 100%; height: 8px; background: #ccc; } .progress-bar { height: 8px; background: #04AA6D; width: 0%; } #info { width: 256px; height: 256px; overflow-y: auto; background-color: red; } <div name="header" class="header"> <div name="progress-container" class="progress-container"> <div name="myBar" class="progress-bar" id="myBar"></div> </div> </div> <div id="info"> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> <p>SOME TEXT</p> </div>