Empecemos
En diferentes criterios y manifiestos de calidad, existe un elemento como el desplazamiento de la página de bloqueo cuando se abre una ventana modal. Una ventana modal implica interacción solo con ella.
Muchos harán la pregunta: "¿Por qué no usar soluciones preparadas?". El problema es que esta funcionalidad no se implementa en absoluto o se realiza de manera muy deficiente. Puedes usar la solución más simple y peor:
.body { overflow: hidden;}
Aquí obtenemos una ligera contracción de la página.
Código Vale la pena señalar: el problema ocurre solo donde el desplazamiento se lleva a cabo en la página, por ejemplo, en Safari no existe tal problema.
Problema de animación (GIF) Algunas soluciones en los espacios abiertos de npm ofrecen reemplazar el pergamino con una sangría o bloque con el estilo de un pergamino (una simple barra gris), mucha magia, pero no solucionan el problema.
Ajustaremos un poco el código inicial y todo funcionará:
.body { position:fixed; overflow-y: scroll; }
Ahora ha aparecido otro problema: la página salta.
Código La solución a través de js es simple: al abrir la página, tomamos el valor al que se desplaza la página y establecemos este valor en la propiedad
superior de la etiqueta de
código <body>.
function getBodyScrollTop() { return self.pageYOffset || (document.documentElement && document.documentElement.ScrollTop) || (document.body && document.body.scrollTop); } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop()
A veces en el sitio puede haber una página que tiene poco contenido y no hay desplazamiento, pero cuando abre una ventana modal, nuestro código la agrega. Modifiquemos un poco el desplazamiento.
Solución lista function existVerticalScroll() { return document.body.offsetHeight > window.innerHeight } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop() modal.classList.add('modal--open') if(existVerticalScroll()) {
Disponibilidad
Si no lo piensa, habrá un posible movimiento usando una pestaña fuera de la ventana modal. En gif, solo presiona
Tab varias veces.
Problema de animación (GIF) En Internet, no hay una solución simple para este problema, y escribir su bicicleta de
muletas no es muy racional cuando hay una
biblioteca focus-trap.js .
Aquí, el autor reveló con más detalle el tema de las bibliotecas y sus problemas .
Resumen
Incluso si hay varias ventanas modales en la página, puede ajustar todo el código en una función y pasar el nombre de la clase de la ventana modal.
function initModal(className) {
El problema a primera vista es simple, pero hay tantos momentos no obvios. Creo que este artículo te ayudará a crear mejores ventanas modales.
Código listoMateriales utiles