Soy nuevo en el mundo del desarrollo web y quería saber si hay alguna forma de desactivar el desplazamiento en segundo plano.
Probé el índice z para que la ventana emergente se mostrara sobre todos los elementos, pero parte del contenido de fondo se superponía con la ventana emergente.
No estoy muy familiarizado con JS, pero no pude obtener ayuda.
A continuación, encuentre mi código
body { height: 200vh; } .bg-noscroll { } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { transform: translateY(-60px); margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .content { height: 250px; } .popup .content { overflow-y: scroll; } @media screen and (max-width: 700px){ .popup{ width: 70%; } <body class="bg-noscroll bg-scroll"> <span><a class="popupBG-Disable" href="#popup">Full Recipe</a></span> <div id="popup" class="overlay"> <div class="popup"> <h3>Foxtail Millet Porridge:</h3> <a class="close" href="#">×</a> <div class="content"> <span>Ingredients:<br>here are some things that you'd use to make this<br> isn't this amazing?<br>Yes, it is!<br> this is getting loooooong<br>this will take me a while!<br>oh... yes it will<br>we're getting close<br>and we should be there <br>or not...<br>Im losing hope<br>and patience<br>with how long this is taking<br>I could really cry<br> but we'll get there soon<br>safe and sound<br>free as pie<br>I dont know what I meant by that<br> this is taking long mannnn<br> </span>¡Gracias por tu ayuda!
Cuando establece la altura del cuerpo en 200vh, significa que su página tiene el doble de la altura del monitor. Cuando no establece la altura del cuerpo, la altura se ajusta automáticamente al tamaño del contenido.
Actualmente, debe utilizar javascript y agregar o eliminar las propiedades de la barra de desplazamiento o la clase css utilizando un detector de eventos hashchange, por ejemplo:
window.addEventListener("hashchange", event => { const newHash = new URL(event.newURL).hash, el = document.getElementById(newHash.substr(1)); if (el && el.classList && el.classList.contains("overlay")) { document.body.style.overflow = "hidden"; // or document.body.classList.add("bg-noscroll"); } else { document.body.style.overflow = ""; // or document.body.classList.remove("bg-noscroll"); } }); A partir de chromium 101 , se implementó la compatibilidad con el selector :has() (solo indicador experimental) y el canal de desarrollo actual de chromium 105 trae el selector :has() habilitado de forma predeterminada .
Con el selector has() será posible usar:
body:has(.overlay:target) { overflow: hidden; } Tenga también en cuenta que otros navegadores pueden tardar un poco más en implementar el selector has() . Por lo tanto, lo mejor sería seguir con el método javascript por un tiempo.
Tengo un codepen en vivo con su código original para que pueda copiar y pegar si lo desea.
Usando Jquery, podemos habilitar y deshabilitar el desbordamiento usando un código simple:
const modal = document.querySelector("#btn"); const body = document.querySelector("body"); const showModal = function (e) { modal.classList.toggle("hidden"); if (!modal.classList.contains("hidden")) { body.style.overflow = "hidden"; } else { body.style.overflow = "hidden"; } }; // just reversed for re-enabling scroll, as seen in the codepen