HTML <dialog> 标记模式在打开时滚动到底部

Question

使用dialog HTML标签调用.showModal()方法时，貌似模态内容长于对话框显示区域时，对话框会自动滚动到每次打开底部。是否有一种干净的方法来抑制这种行为，以便对话框内容在打开时保持在最顶部？

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>

Answer 1

感谢@Teemu 在问题评论中的解释，出现此行为的原因是 button 元素开始关注负载。

就我而言，我将该按钮用作关闭按钮，因此将 button 替换为不带 href 属性的 a 标签可以解决问题。

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>

HTML <dialog> 标记模式在打开时滚动到底部

HTML <dialog> tag modal scrolling to bottom on open

html

javascript

modal-dialog