Parece que no puedo hacer que el evento de desplazamiento funcione para este diseño. Estoy atascado y me preguntaba si ustedes me pueden ayudar. Lo que estoy tratando de hacer es detectar cuándo se desplaza el div de contenido, que tiene id="myContent". ¿Qué estoy haciendo mal?
Gracias por adelantado.
<!DOCTYPE html> <html> <head> <script> window.onscroll = function() {scrollFunction()}; function scrollFunction() { console.log("scrollFunction"); } console.log(document.getElementById("myContent")); //dont know why it cannot find this arrrgghhh !!! </script> </head> <body style="width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; position: absolute;"> <!--container--> <div style="border: 1px solid red; width: 100%; height: 100%; position: fixed; overflow: auto; overflow-x: hidden;"> <!--header--> <div style="border: 1px solid green; width: 100%; height: 75px; top: 0; position: sticky; margin: 0 auto; align-items: center;"> </div> <!--content--> <div id="myContent" onscroll="scrollFunction();" style="border: 1px solid blue; width: 100%; height: auto; margin: 0 auto;"> <!--content 1--> <div style="width: 100%; height: 1000px;"> </div> </div> <!--footer--> <div style="border: 1px solid pink; width: 100%; height: 150px; margin: 0 auto;"> </div> </div> </body>Cualquier ayuda es apreciada. Gracias por adelantado
Saludos
El problema es que actualmente la barra de desplazamiento vertical no aparece en el div que tiene definido el detector de onscroll , sino en su padre. Para ver la barra de desplazamiento en ese div, debe definir explícitamente su height junto con overflow-y: auto . Asegúrese también de definir overflow: hidden en el div principal.
Eche un vistazo a su código modificado y vea cómo funciona.
<!DOCTYPE html> <html> <head> <script> window.onscroll = function() {scrollFunction()}; function scrollFunction() { console.log("scrollFunction"); } console.log(document.getElementById("myContent")); //dont know why it cannot find this arrrgghhh !!! </script> </head> <body style="width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; position: absolute;"> <!--container--> <div style="border: 1px solid red; width: 100%; height: 100%; position: fixed; overflow: hidden;"> <!--header--> <div style="border: 1px solid green; width: 100%; height: 75px; top: 0; position: sticky; margin: 0 auto; align-items: center;"> </div> <!--content--> <div id="myContent" onscroll="scrollFunction();" style="border: 1px solid blue; background-color: gray; width: 100%; height: 500px; overflow-y: auto; margin: 0 auto;"> <!--content 1--> <div style="width: 100%; height: 1000px;"> </div> </div> <!--footer--> <div style="border: 1px solid pink; width: 100%; height: 150px; margin: 0 auto;"> </div> </div> </body>