1

introducir la descripción de la imagen aquítengo una duda y es que quisiera eliminar el evento scroll de una pestaña, al hacer click en un boton sale un modal pero quiero que no se pueda hacer scroll, busque en internet pero estoy algo/muy perdido, el scroll tiene que eliminarse cuando hago un click, de antemano gracias :D

const w = window;
w.addEventListener("scroll", e => {
    console.log("scrolleando");
})
const setScroll = () => {
    setloginUsuario(true)
    w.removeEventListener("scroll", e => {
        console.log("removiendo el scroll");
    })
}

2 respuestas 2

1

Revisando tu comentario a mi respuesta original, lo que buscas es no permitir desplazamiento al mostrar la ventana modal y eso es muy diferente a cancelar un evento. Se puede agregando una clase al cuerpo de la página donde se asigne la propiedad overflow: hidden;.

Cuando abres la ventana modal agregas la clase al cuerpo de la página y la quitas al cerrar:

document.querySelector('#desactivar').addEventListener('click', e => {
    // Agregar clase para no permitir desplazamiento
    document.body.classList.add('no-scroll');
});

document.querySelector('#activar').addEventListener('click', e => {
    // Quitar clase para permitir desplazamiento
    document.body.classList.remove('no-scroll');
});
.no-scroll {
    /* Debe tener altura específica para que funcione */
    max-height: 100vh;
    overflow: hidden;
}

p {
    margin:100px;
}
<button id="desactivar">Desactivar scroll</button>
<button id="activar">Activar scroll</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

2
  • Claro el problema es que el evento no esta asignado a ninguna función ya que es un comportamiento natural de la pagina. Capaz no formule bien la pregunta pero lo que quiero lograr es que se bloquee el scroll de la pagina cuando clickeo en el boton de iniciar sesión. y poder controlar cuando volver a activar el scroll ahí adjunte una foto para mejor comprensión Commented el 31 ago. 2021 a las 23:26
  • @AlexisBermúdez, actualicé la respuesta, creo que esto va a solucionar el problema.
    – Triby
    Commented el 1 sept. 2021 a las 0:29
0

cómo estás? Asumiendo por el título y el ejemplo estás usando netamente Js.

Haciendo un poco de investigación encontré este artículo:

https://www.geeksforgeeks.org/how-to-disable-scrolling-temporarily-using-javascript/

Que básicamente consiste en sobreescribir el evento onScroll

function disableScroll() {
    // Guarda la posición especifica
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  
        // Si el evento se activa, setea la misma posición
        window.onscroll = function() {
            window.scrollTo(scrollLeft, scrollTop);
        };
}
  
function enableScroll() {
    window.onscroll = function() {};
}

Espero te sea de ayuda.

Saludos!!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.