HTML `diálogo` elemento: desplazamiento de contenido independientemente de fondo

Estoy tratando de usar el dialog elemento.

Cuando mi diálogo/modal tiene gran contenido, quiero que el usuario pueda desplazarse por él.

Sin embargo, no quiero que desplazarse para aplicar tanto en el diálogo/modal y el fondo del cuerpo, que es lo que parece hacer de forma predeterminada.

Ejemplo: https://output.jsbin.com/mutudop/3.

¿Cómo puedo hacer de desplazamiento sólo se aplican para el diálogo/modal contenido, cuando el cuadro de diálogo/modal está abierto?

Nota: sólo estoy interesado en soluciones con el nativo dialog elemento.

1 Respuestas

  • Csaba Farkas
    4 de mayo de 2019

    Puedes cambiar el estilo del contenido de su dialog para lograr esto. He utilizado un contenedor div y flexbox en el ejemplo a continuación.

    (function() {
  var openBtn = document.getElementById('open-dialog');
  var myDialog = document.getElementById('my-dialog');

  openBtn.addEventListener('click', function() {
    if (typeof myDialog.showModal === "function") {
      myDialog.showModal();
    } else {
      alert("Dialog API not supported by browser");
    }
  });

})();
    #my-dialog {
  width: 50%;
  max-height: 50vh;
  overflow-y: auto;
}

#my-dialog__content {
  display: flex;
  flex-direction: column;
  height: 150vh;
}

menu {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

#cancel-button {
  width: 100%
}
    <div id="container">
  <dialog id="my-dialog">
    <div id="my-dialog__content">
      <form method="dialog">
        <menu>
          <button id="cancel-button" value="cancel">Cancel</button>
        </menu>
      </form>
    </div>
  </dialog>

  <menu>
    <button id="open-dialog">Open Dialog</button>
  </menu>
</div>