Cuando se utiliza la etiqueta HTML del cuadro de dialog y se llama al método .showModal() , parece que cuando el contenido modal es más largo que el área de visualización del cuadro de diálogo, el cuadro de diálogo se desplazará automáticamente hasta la parte inferior cada vez que se abra. ¿Hay una forma limpia de suprimir este comportamiento, de modo que el contenido del cuadro de diálogo permanezca en la parte superior abierta?
document.getElementById("openDialog").addEventListener("click", () => document.getElementById("modal").showModal()); document.getElementById("closeDialog").addEventListener("click", () => document.getElementById("modal").close()); <button id="openDialog">Open</button> <dialog id='modal'> <h1>Hello world 1</h1> <h1>Hello world 2</h1> <h1>Hello world 3</h1> <h1>Hello world 4</h1> <h1>Hello world 5</h1> <h1>Hello world 6</h1> <h1>Hello world 7</h1> <h1>Hello world 8</h1> <h1>Hello world 9</h1> <h1>Hello world 10</h1> <button id="closeDialog">Close</button> </dialog>Gracias a la explicación de @Teemu en los comentarios de la pregunta, el motivo de este comportamiento se debe a que el elemento del button se enfoca en la carga.
En mi caso, estoy usando el botón como botón para descartar, por lo que reemplazar el button con a etiqueta sin el atributo href resolvería el problema.
document.getElementById("openDialog").addEventListener("click", () => document.getElementById("modal").showModal()); document.getElementById("closeDialog").addEventListener("click", () => document.getElementById("modal").close()); <button id="openDialog">Open</button> <dialog id='modal'> <h1>Hello world 1</h1> <h1>Hello world 2</h1> <h1>Hello world 3</h1> <h1>Hello world 4</h1> <h1>Hello world 5</h1> <h1>Hello world 6</h1> <h1>Hello world 7</h1> <h1>Hello world 8</h1> <h1>Hello world 9</h1> <h1>Hello world 10</h1> <a id="closeDialog">Close</button> </dialog>