1

<style type="text/css">
.Menu{

height:400px;
width:200px;
background-color: rgba(0,0,0,0.9);


}

button{
transform: translateY(-400px)translateX(330px);
}
</style>
<div class="Menu"></div>

<button>Close Background Black</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut dolor sed metus lacinia mollis. Curabitur vitae malesuada ligula. Vivamus justo magna, varius et viverra a, fringilla vel lacus. Suspendisse potenti. Nam sollicitudin eget nibh eget pretium. Maecenas a rutrum sem. Mauris sit amet odio at dui tristique imperdiet at et erat. Cras consectetur gravida dui, et hendrerit magna posuere ut. Vestibulum auctor non felis ut vehicula. Duis felis sem, viverra vitae dui id, efficitur lobortis velit. Cras rhoncus lacinia metus, eget interdum metus blandit at.

Duis pellentesque diam quis cursus porta. Proin placerat a urna et mollis. Curabitur elit diam, aliquet vitae elit sit amet, ornare bibendum dolor. Cras consequat suscipit eros, quis ornare sem. Proin congue, odio et posuere maximus, lacus felis rhoncus quam, nec sagittis lorem lacus ut nisi. Maecenas feugiat rhoncus mauris, ac pretium eros. Donec egestas semper auctor. Nulla ut leo quis mauris tempor venenatis. Vivamus a sodales libero, at consequat odio. Praesent porta enim nisi, at lacinia est mollis id.

Integer condimentum odio quis lorem finibus, sed commodo quam vehicula. Vivamus varius, augue sed vehicula fermentum, nisl libero sagittis risus, pellentesque auctor dolor velit vel mauris. Curabitur blandit purus viverra rutrum mattis. Curabitur id risus auctor, faucibus ipsum a, pretium arcu. Nullam at interdum tortor, id condimentum purus. Pellentesque ultrices sed eros sit amet consectetur. Maecenas blandit risus at fermentum placerat. Sed non varius sem. Curabitur fermentum ligula ultricies sollicitudin molestie.

Nullam sollicitudin pellentesque felis non convallis. Praesent laoreet lectus vel viverra tristique. Aenean mattis purus quis est suscipit iaculis. Donec non enim odio. Vestibulum tempor, augue sed auctor scelerisque, ex massa hendrerit dui, vulputate tincidunt odio enim ac augue. Aenean auctor lorem id elementum blandit. Aenean sed est semper, commodo augue quis, venenatis massa.

Suspendisse potenti. Aenean quis varius velit. Curabitur interdum mauris id turpis varius fermentum. Quisque tempus finibus malesuada. Nullam dapibus laoreet viverra. Suspendisse sed iaculis elit. Nam tincidunt commodo tellus vitae blandit. Phasellus elementum tortor quis lacus iaculis imperdiet at nec ipsum. Vestibulum rutrum tellus eu nunc malesuada tincidunt. Donec pharetra turpis a augue ultrices, sed aliquet magna pulvinar. Nam id sem vel neque ullamcorper semper. In a tortor vitae dui luctus ultrices sed in augue. Cras luctus metus sit amet odio egestas posuere. Sed dolor mi, accumsan non pellentesque a, hendrerit non augue.
</p>

tengo resuelto el script para ocultar y aparecer el div que contiene el background Negro... (pero lo que yo estoy buscando es, cuando ese div aparezca en el html se quede fijo no haga scroll y después al cerrar el div que el scroll vuelva a estar activo)

unas imágenes para tener claro el concepto de lo que busco

(aqui como se puede observar el Menu se abrió y el scroll esta bloqueado) introducir la descripción de la imagen aquí

después de cerrar el menu(en mi caso hablamos del div) entonces ocurre que se desbloquea el scroll y puedes bajar en la pagina libremente

introducir la descripción de la imagen aquí

1 respuesta 1

1

Podemos trabajarlo del siguiente modo (esto que te dejo es un ejemplo basado en lo que buscas):

  • El div que aparece lo trabajamos con un dialog que es una etiqueta oficial de HTML para mostrar una caja de diálogo
  • Para evitar el scroll y que con ello el elemento dialog se mueva y pierdan visibilidad le aplicamos un position fixed para que precisamente el scroll no modifique su ubicación
  • El valor fixed al posicionamiento lo declaramos en CSS y lo adjuntamos por medio de JS a través del método setAttribute
  • Acompañamos lo anterior con un overflow dando un valor de hidden para ocultar el contenido que se desborda al elemento body y de esta manera mientras el cuadro de diálogo esta abierto no se pueda hacer scroll al resto del contenido de la web
  • La etiqueta dialog tiene 2 eventos que son:
    • showModal() para mostrarlo
    • close() para cerrar el dialog
  • El cierre del cuadro de diálogo lo vamos a manejar por medio de una etiqueta a a la cual capturaremos el evento click sobre ella por medio de JS y desecanderamos el segundo método justamente arriba mencionado
  • Cuando cerramos el dialog necesitamos que el body vuelva a mostrar todo el contenido entonces reseteamos la propiedad overflow ahora con un valor de auto que es el que se tiene por defecto

EJEMPLO

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>EJEMPLO</title>
      <style>
        .contenedor-noticias__noticia {
          border: 1px solid;
          margin-top: 1em;
          padding: 1em;
        }
        .fijo {
          position: fixed;
        }
      </style>
    </head>
    <body>
    <button id="activaAviso">Activa el aviso</button>
    <section class="contenedor-noticias">
      <article class="contenedor-noticias__noticia">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos veniam provident, minus, vitae repudiandae enim excepturi, porro iure fugit beatae a tenetur rem explicabo voluptatum, ab! Non totam nostrum fugit.
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur earum, ad autem saepe corrupti cum numquam voluptatibus iure cupiditate. Cumque est consequuntur consequatur repellendus incidunt minus tenetur porro enim sunt.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit aperiam quaerat suscipit deserunt sit soluta accusamus eaque neque voluptatibus dolore, assumenda natus quis! Distinctio maiores in iste accusantium, reprehenderit et.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum error fuga numquam ducimus sunt excepturi aspernatur perspiciatis ipsum placeat totam! Quos quia, autem ratione magni placeat minus optio possimus molestiae.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia hic, aliquid obcaecati aliquam odio explicabo placeat tenetur inventore, nostrum dolores quaerat, alias dicta officia asperiores aspernatur est, cum ea. Magni.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non quae modi ex voluptate natus doloremque dolorem? Accusantium quaerat eaque nam animi nihil numquam quidem consequuntur quo, suscipit repudiandae debitis?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, delectus non hic fuga sit mollitia, fugit eius porro doloremque nisi provident amet. Laudantium totam, nisi id quasi iusto dicta quidem!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, quisquam ipsam ipsa eligendi laborum quibusdam placeat cum impedit, quam numquam dolorum in, adipisci! Delectus deleniti voluptate corporis neque eum. Quidem?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eligendi ipsa ab quam tenetur veniam explicabo quis, officia repellendus dolorum facilis aut tempore natus nisi reiciendis dolore. Pariatur, commodi, deserunt.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi perferendis itaque nostrum facilis veniam, sed omnis ullam distinctio. Iusto nesciunt praesentium voluptatum ullam ex facilis expedita impedit veniam a.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id repellat facilis iste consectetur provident ullam error unde, ex, autem in vitae tempore ut fuga! Ipsum sunt rem consequatur dolorum, porro.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et numquam provident dolorum inventore tenetur nostrum fugiat corporis repellendus sequi, animi doloremque dolore quo unde saepe, voluptates cupiditate quos nobis alias!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est omnis dolores maxime numquam labore ea, quis natus, nulla molestiae consectetur inventore fugit alias architecto culpa et minus porro totam ducimus?    
        Atentamente YO
      </article>
      <dialog class="contenedor-noticias__alerta">
        Toma nota de este aviso importante
        <a id="cierra-modal" href="#">X</a>
      </dialog>
    </section>
    <script>
        let activaAviso = document.getElementById("activaAviso")
        let avisoAlerta = document.querySelector(".contenedor-noticias__alerta")
        let cierraModal = document.getElementById("cierra-modal")
        activaAviso.addEventListener("click", () => {
          avisoAlerta.setAttribute("class", "fijo")
          avisoAlerta.showModal()
          document.body.style.overflow = "hidden"
        })
        
        cierraModal.addEventListener("click", () => {
          avisoAlerta.close()
          document.body.style.overflow = "auto"
        })
    </script>
    </body>
    </html>

6
  • y en cuanto a que el div aparezca , de que forma puedo hacer para que el DOM se quede sin scroll, veras es que lo que yo buscaba era que cuando tu presionas el button y aparezca el div , entonces el body o lo que esta detrás del div se quede sin scroll, no se si me explique bien
    – John
    Commented el 7 abr. 2020 a las 22:38
  • Puedes lo mismo indicar que en el body tenga position fixed, eso eliminaría el scroll @JuanCarlos
    – user128299
    Commented el 7 abr. 2020 a las 22:43
  • si es correcto pero entonces tambien el contenido que esta mas abajo del div se queda fijo y no. baja mas y eso no es lo que estoy buscando, lo que yo busco es que uno cuando abra el div entonces se bloquea el scroll y ya después de cerrar el div se activa el scroll a ver como ejemplo esta esta pagina web como referencia www.animeflv.net si lo abres en chrome y buscas el inspector y lo abres como si estuvieras en movil y buscas el menu te darás cuenta a lo que yo me refiero
    – John
    Commented el 7 abr. 2020 a las 22:54
  • Ok @JuanCarlos lo intentaré y en caso de tenerte una respuesta editaré mi aporte
    – user128299
    Commented el 8 abr. 2020 a las 1:32
  • ok, gracias por ayudar y disculpa mucho por no haber explicado muy bien lo que buscaba.. Gracias
    – John
    Commented el 8 abr. 2020 a las 2:01

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.