Si alguna vez necesita temporalmente deshabilitar el desplazamiento en un elemento desplazable específico, necesitará usar JavaScript o CSS para ello. Dependiendo de su caso de uso, puede elegir entre soluciones JavaScript y CSS. Aunque en términos generales la solución CSS es la más adoptada, JavaScript te ofrece un poco más de control y flexibilidad y te permite decidir exactamente cómo quieres detener el desplazamiento.
Una de las opciones es escuchar el evento de la rueda en el elemento que desea evitar el desplazamiento y luego evitar el comportamiento predeterminado, así como detener la propagación y devolver un valor falso.
Algo tan simple como esto, donde #scrollable sería el ID de nuestro elemento scrollable.
document.querySelector('#scrollable').addEventListener('wheel', preventScroll, {passive: false});function preventScroll(e){
e.preventDefault();
e.stopPropagation();
return false;
}
Tenga en cuenta también que estamos usando la opción {passive: false} en el detector de eventos. En realidad, esto se debe a que tenemos que decirles a los navegadores que, eventualmente, podríamos llamar a preventDefault y cancelar el comportamiento predeterminado. De esta forma, el navegador es consciente de ello y puede decidir cómo tratar el evento. Puedes leer más sobre esto en los documentos.
Ahora, ¿qué pasa si queremos habilitar o deshabilitar esto dinámicamente? Aquí hay un ejemplo con un par de botones, uno para deshabilitar el desplazamiento y otro para habilitarlo:
Si desea aplicarlo a varios elementos, es tan fácil como iterarlos y aplicarlos a la misma función.
document.querySelector('.scrollable').forEach(function(item){
item.addEventListener('wheel', preventScroll);
});Ahora, eche un vistazo a la forma CSS porque la forma JS puede volverse un poco más complicada si tenemos en cuenta el teclado y el desplazamiento táctil.
Hay otra forma de deshabilitar el desplazamiento que se usa comúnmente al abrir modales o elementos flotantes desplazables. Y es simplemente agregando la propiedad CSS overflow: hidden; en el elemento que desea evitar el desplazamiento.
Claramente, es la solución más fácil si desea deshabilitar el desplazamiento sin importar qué lo active (ratón, teclado o toque), pero al mismo tiempo, no le dará la flexibilidad de elegir qué deshabilitar y qué no.
Hay un par de diferencias con la forma anterior. Pueden ser buenos para usted o no, dependiendo de su caso de uso:
También deshabilitará el desplazamiento del teclado. Por lo tanto, no podrá moverse hacia arriba o hacia abajo usando las flechas del teclado y la barra espaciadora, etc.
No le permitirá desplazarse hacia arriba/abajo seleccionando texto.
También deshabilitará el desplazamiento táctil.
También podría evitar el desplazamiento con “el tercer botón” del mouse, que presiona la rueda del mouse mientras arrastra el mouse. (Si alguien puede verificar esto por mí, sería genial, ya que no tengo un mouse para probarlo en este momento :))
¿Entonces, Cómo lo hacemos? Creamos una clase que alternaremos cada vez que la necesitemos y que lo único que hace es evitar el desplazamiento sobre el elemento al que la aplicamos.
.disable-scroll{
overflow-y: hidden;
}Luego, con JavaScript simplemente lo agregamos o quitamos cuando queramos:
function disable(){
document.querySelector('.scrollable').classList.add('disable-scroll');
}function enable(){
document.querySelector('.scrollable').classList.remove('disable-scroll');
}document.querySelector('#prevent').addEventListener('click', disable);
document.querySelector('#allow').addEventListener('click', enable);
Aquí hay un ejemplo de trabajo:
Si decide optar por la solución JS, es posible que también desee deshabilitar el desplazamiento por el teclado.
En este caso, simplemente tenemos que escuchar el evento keydown y evitar el comportamiento predeterminado cuando detectamos que están presionando cualquier tecla que pueda desencadenar un movimiento de desplazamiento, como las flechas del teclado, la barra espaciadora, shift+barra espaciadora, página arriba, página abajo, etc. .
Aquí está el código:
document.addEventListener('keydown', preventKeyBoardScroll, false);function preventKeyBoardScroll(e) {
var keys = [32, 33, 34, 35, 37, 38, 39, 40];
if (keys.includes(e.keyCode)) {
e.preventDefault();
return false;
}
}
Y aquí está el ejemplo:
Y por supuesto, no podemos olvidarnos del scroll táctil. La solución CSS parece facilitarnos mucho las cosas, pero si necesitamos un control total sobre lo que permitimos que los usuarios hagan y lo que no, entonces probablemente la versión de JavaScript sea el camino a seguir.
Con respecto a los eventos táctiles, esto es bastante similar a cancelando el scroll para el evento de la rueda.
Simplemente tenemos que agregar exactamente la misma función en un detector de eventos touchmove:
var scrollable = document.querySelector('.scrollable');
scrollable.addEventListener('touchmove', disable, {passive: false});También encontrará que hay algunos componentes y módulos que le brindan esta característica lista para usar.
Algunos solo se aplican a todo el documento, mientras que otros le permiten aplicarse a elementos desplazables específicos.
Aquí hay algunos que encontré:
Artículos relacionados
