dialog标签不适合做右侧滑出菜单——它专为模态/非模态弹窗设计，不支持侧向滑入、无法脱离文档流做固定定位、原生行为强制居中且不可取消，强行用它实现右滑菜单会踩一堆坑，最终代码臃肿、兼容性差、可访问性受损。
dialog 标签不适合做右侧滑出菜单——它专为模态/非模态弹窗设计，不支持侧向滑入、无法脱离文档流做固定定位、原生行为强制居中且不可取消，强行用它实现右滑菜单会踩一堆坑，最终代码臃肿、兼容性差、可访问性受损。
如果你看到有人用 dialog 做右滑菜单，基本是误读了它的语义和能力边界。
为什么 dialog 不能直接当右滑菜单用
-
dialog.showModal()会自动居中、加 backdrop、锁焦点、拦截 Tab 键——这些对菜单全是干扰 -
dialog的定位由浏览器控制，无法设right: 0或transform: translateX(100%)实现滑入效果 - Safari 对
dialog的transform和父容器will-change渲染极不稳定，菜单可能直接消失 - 没有
open属性时 DOM 不参与布局计算，getBoundingClientRect()返回空值，动画起始位置无法获取 -
dialog::backdrop是伪元素，不可编程、无事件冒泡，想“点遮罩关闭”得绕大弯，且 Safari 完全不支持
右侧滑出菜单该用什么结构
真正可行的方案是：div + position: fixed + CSS class 控制 transform
- 菜单容器必须是
body的直接子元素（不是嵌套在main或section里） - 必须用
position: fixed，配合top: 0、right: 0、height: 100vh、width: 320px - 显隐靠 class 切换，比如
.drawer-open→transform: translateX(0)，.drawer-closed→transform: translateX(100%) - 遮罩层（
.overlay）单独写一个div，用position: fixed覆盖全屏，z-index 低于菜单但高于主内容 - 打开菜单时，要同时给
html和body加overflow-x: hidden，否则 iOS Safari 会出现横向滚动条
点击遮罩关闭菜单的可靠写法
不要依赖 dialog 的 backdrop 事件（Safari 不触发），而是自己管理：
- 给遮罩层绑定
click事件 - 关闭时移除菜单的
drawer-openclass，并移除html/body的overflow-x: hidden - 同时调用
document.body.focus()，避免焦点丢失导致键盘操作失效
示例逻辑：
const drawer = document.querySelector('.drawer');
const overlay = document.querySelector('.overlay');
const openBtn = document.getElementById('menu-btn');
<p>openBtn.addEventListener('click', () => {
drawer.classList.add('drawer-open');
overlay.style.display = 'block';
document.documentElement.style.overflowX = 'hidden';
document.body.style.overflowX = 'hidden';
});</p><p>overlay.addEventListener('click', () => {
drawer.classList.remove('drawer-open');
overlay.style.display = 'none';
document.documentElement.style.overflowX = '';
document.body.style.overflowX = '';
document.body.focus();
});
</p>
dialog 的价值在于语义化弹窗（确认框、表单提交反馈、错误提示），不是 UI 动效容器。右侧滑出菜单的本质是「覆盖式导航容器」，它的定位、动效、焦点流、滚动穿透控制，都需要你亲手接管——这恰恰是它稳定、可控、跨平台可用的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
