¿Cómo se anulan las funciones de desplazamiento de un navegador en JavaScript?
Las funciones que pude encontrar son scroll , scrollBy y scrollTo (desde el objeto de la window ). Pero, si trato de anularlos usando el procedimiento estándar, como cualquier otra función, por ejemplo, ejecutando el siguiente código window.scroll = function(parameter){} no tiene ningún efecto en el navegador. Entonces, si trato de desplazarme por la página después de ejecutar el código anterior (para los 3 métodos), la ventana aún se desplaza.
¿Existen otras funciones que utiliza el navegador para desplazarse? Si es así, ¿qué función debo anular para obtener un comportamiento de desplazamiento personalizado?
Estoy usando Google Chrome (última versión), por supuesto.
Los métodos window.scroll , window.scrollTo y window.scrollBy no hacen referencia a la funcionalidad de desplazamiento nativa. Se utilizan para desplazarse a ubicaciones específicas en la página web. Si desea implementar una funcionalidad/comportamiento de desplazamiento completamente personalizado, debe escuchar el evento de la wheel , evitar el valor predeterminado y definir su comportamiento personalizado.
document.addEventListener("wheel", (event) => { event.preventDefault(); event.stopPropagation(); // now define custom functionality }, { passive: false }); En lugar de ventana, también puede aplicarlo a cualquier otro elemento de la página que tenga una barra de desplazamiento y, por lo tanto, sea desplazable.
Además, el evento de la rueda tiene valores para deltaX y deltaY para que pueda ver cuánto se ha desplazado desde el último desplazamiento y puede usar las propiedades x e y para ver cuánto se ha desplazado desde el principio.
Con Javascript, no estoy seguro de cómo evitar por completo el desplazamiento, pero puede desplazarse a una ubicación en particular justo después de que intenten desplazarse, así:
document.addEventListener('scroll', function(event) { event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); window.scrollTo(0,0); }); <h1>Try to Scroll</h1> <ol> <li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li> </ol> Tenga en cuenta que, a pesar de mis intentos de ser minucioso, aún puede ver un pequeño desplazamiento antes de window.scrollTo(0,0); lo deshace.
CSS
Si todo lo que intenta hacer es evitar el desplazamiento, puede usar overflow: hidden con CSS:
html,body { overflow: hidden; } <h1>Try to Scroll</h1> <ol> <li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li> </ol>