如何阻止调用dialog.showModal()时页面自动滚动到顶部？

问题根源 #

原生<dialog>的showModal()方法会自动将焦点转移到对话框上，浏览器为了确保获得焦点的元素可见，会强制滚动页面到对话框的默认居中位置——这就是你滚动到列表底部点击元素时，页面跳回顶部的原因。

可行解决方案（纯HTML/CSS/JS） #

方案1：记录滚动位置+阻止自动焦点跳转

点击列表项时先保存当前滚动位置，显示对话框后强制页面滚回原位，同时阻止对话框自动获取焦点避免触发浏览器的滚动逻辑：

function handleListItemClick() {
  // 记录当前滚动位置
  const currentScroll = window.scrollY;
  const dialog = document.getElementById('target-dialog');

  // 一次性监听show事件，阻止默认的焦点行为
  dialog.addEventListener('show', (e) => e.preventDefault(), { once: true });

  // 显示对话框
  dialog.showModal();

  // 滚回之前的位置
  window.scrollTo(0, currentScroll);

  // 可选：延迟确保dialog渲染完成后再补一次滚动（避免极端情况）
  setTimeout(() => window.scrollTo(0, currentScroll), 0);
}

方案2：禁用自动焦点+手动指定焦点

通过CSS隐藏对话框焦点轮廓，再手动给对话框内的可交互元素设置焦点，避免浏览器自动滚动：

/* 移除dialog默认焦点轮廓，避免视觉干扰 */
dialog:focus-visible {
  outline: none;
}

function handleListItemClick() {
  const scrollPos = window.scrollY;
  const dialog = document.getElementById('target-dialog');

  // 禁用dialog自动获取焦点
  dialog.setAttribute('autofocus', 'false');
  
  dialog.showModal();
  // 滚回原位置
  window.scrollTo(0, scrollPos);

  // 手动给对话框内的关闭按钮设置焦点（保证可访问性）
  setTimeout(() => dialog.querySelector('.dialog-close-btn').focus(), 0);
}

方案3：用show()替代showModal()（无原生模态需求时）

如果不需要原生模态的遮罩和页面阻塞效果，可以用show()方法，它不会触发自动滚动，但需要自己实现模态背景：

function handleListItemClick() {
  const dialog = document.getElementById('target-dialog');
  dialog.show();

  // 创建自定义遮罩层
  const backdrop = document.createElement('div');
  backdrop.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  `;
  document.body.appendChild(backdrop);

  // 关闭对话框时移除遮罩
  dialog.addEventListener('close', () => backdrop.remove(), { once: true });
}

内容的提问来源于stack exchange，提问作者IT Serenity