dialog内容溢出时滚动条不出现，需将overflow-y: auto设在内部div容器（如.dialog-body）上并配max-height，而非dialog本身；因dialog默认display: contents且盒模型特殊，直接设置无效。
dialog内容溢出时滚动条不出现？先确认 height 和 overflow 设置
直接给 <dialog> 加 overflow: auto 没用——它默认是 display: contents 行为，内部尺寸不继承，且浏览器对 <dialog> 的盒模型处理特殊。滚动必须作用在**内部容器**上，而不是 <dialog> 本身。
常见错误现象：内容撑开弹窗、右侧没滚动条、滚动卡顿或完全不可拖动。
- 给
<dialog>设height或max-height无效，它会无视并自适应内容高度 - 在
<dialog>上设overflow-y: auto，通常不触发滚动（尤其 Safari） - 未限制内部内容区域高度，导致父级无法形成“可滚动上下文”
正确做法：用一个包裹 <div class="dialog-body">，再对其设高和溢出：
<dialog id="myDialog">
<div class="dialog-body">
<p>很长很长的内容……</p>
</div>
</dialog>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.dialog-body {
max-height: 70vh;
overflow-y: auto;
padding: 1rem;
}
为什么 dialog 内部滚动在 Safari/旧 Chrome 中失效？检查父容器干扰
<dialog> 的渲染层级独立于普通 DOM 流，但它的子元素仍受父容器 CSS 影响。若 <dialog> 被嵌套在 transform、will-change 或 overflow: hidden 的容器中，会导致内部滚动被裁剪、失灵，甚至整个弹窗偏移。
典型场景：Vue/React 组件里把 <dialog> 放在 <div class="page-wrapper"> 内；或低代码平台拖拽后自动加了 transform: translateZ(0)。
- 检查
<dialog>的最近非body父节点是否含transform/will-change—— 有则移除或改用position: relative替代 - 确保父容器没有
overflow: hidden，否则滚动条可能被截断不可见 - Safari 15.4–17.6 对
max-height+overflow组合支持不稳定，建议补一句contain: layout提升兼容性
安全写法：
.dialog-body {
max-height: 70vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* iOS 滚动顺滑 */
contain: layout;
}
滚动条样式难统一？别碰 ::-webkit-scrollbar 在 dialog 内部
给 <dialog> 或其子元素加 ::-webkit-scrollbar 自定义样式，在 Firefox 和 Safari 中基本无效；Chrome 虽支持，但容易因 backdrop 渲染层叠顺序错乱而消失。
更实际的取舍是：接受系统原生滚动条，或用 JS 滚动库（如 simplebar）接管，但要注意与 showModal() 的焦点锁定冲突。
- 不要对
<dialog>直接写::-webkit-scrollbar，优先作用于.dialog-body - 若必须定制，用
simplebar时需在showModal()后初始化，并监听close事件销毁实例 - Firefox 不支持任何滚动条伪元素，所以纯 CSS 方案注定降级——别在这儿强求视觉一致
表单提交后滚动回到顶部？防止 dialog.close() 触发页面跳转
用 <form method="dialog"> 关闭弹窗时，如果表单内有 <button type="submit"> 且没设 value，部分浏览器（尤其是 Safari）会把空值当锚点处理，导致页面意外滚动到顶部或 URL 哈希变化。
- 所有提交按钮必须带
value属性：<button value="confirm">确定</button> - 避免在表单内使用
<input type="submit">，改用<button type="submit">更可控 - 关闭后若需保持页面滚动位置，记得在
dialog.addEventListener('close', ...)里不做任何window.scrollTo干预
真正难的不是让内容能滚，而是滚完之后还能自然聚焦、不闪跳、不打断键盘导航——这些细节在无障碍测试里最容易暴露。
