html＆lt; dialog＆gt;标记模态滚动在打开的底部

发布于 2025-01-20 16:26:33 字数 1072 浏览 0 评论 0原文

使用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>

原文

When using the dialog HTML tag and calling the .showModal() method, it seems that when the modal content is longer than the dialog display area, the dialog will scroll automatically to the bottom on every open. Is there a clean way to suppress this behavior, so that the dialog content will stay at the very top on open?

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

≈。彩虹 2025-01-27 16:26:33

多亏了@Teemu在问题评论中的解释，此行为的原因是button元素专注于加载。

就我的情况而问题。

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>

Thanks to the explanation by @Teemu in the question's comments, the reason for this behavior is due to the button element getting focused on load.

For my case, I am using the button as a dismiss button, thus replacing the button with an a tag without the href attribute would solve the problem.

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>

回复收藏 0 原文

~没有更多了~