Skip to main content
Ocultar barra de desplazamiento en lugar de usar evento scroll.
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Lee la documentaciónRevisando tu comentario a mi respuesta original, donde se especificalo que, para poder eliminar un evento, buscas es necesario que no haya sido asignado con función anónimapermitir 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:

const w = window;
// Crear función para asignar al evento
const scrollFunction = e => {
    console.log("scrolleando");
};
// Asignar evento por nombre de función, no con función anónima
w.addEventListener("scroll", scrollFunction);
// Ahora sí puedes eliminar el evento
const setScroll = () => {
    setloginUsuario(true);
    // Proporciona el nombre de la función
    w.removeEventListener("scroll", scrollFunction);
}

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>

Lee la documentación, donde se especifica que, para poder eliminar un evento, es necesario que no haya sido asignado con función anónima:

const w = window;
// Crear función para asignar al evento
const scrollFunction = e => {
    console.log("scrolleando");
};
// Asignar evento por nombre de función, no con función anónima
w.addEventListener("scroll", scrollFunction);
// Ahora sí puedes eliminar el evento
const setScroll = () => {
    setloginUsuario(true);
    // Proporciona el nombre de la función
    w.removeEventListener("scroll", scrollFunction);
}

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>

Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Lee la documentación, donde se especifica que, para poder eliminar un evento, es necesario que no haya sido asignado con función anónima:

const w = window;
// Crear función para asignar al evento
const scrollFunction = e => {
    console.log("scrolleando");
};
// Asignar evento por nombre de función, no con función anónima
w.addEventListener("scroll", scrollFunction);
// Ahora sí puedes eliminar el evento
const setScroll = () => {
    setloginUsuario(true);
    // Proporciona el nombre de la función
    w.removeEventListener("scroll", scrollFunction);
}