弹窗内部滚动条必须与页面滚动条分离控制，关键是在弹窗内容容器（如.layui-layer-content）上设置max-height和overflow-y:auto，并通过限定作用域的CSS伪元素（如.custom-scroll::-webkit-scrollbar）单独美化；Firefox需补充scrollbar-width和scrollbar-color。
弹窗内部滚动条和页面滚动条必须分开控制
弹窗的滚动条样式不能靠 body 全局设置，否则会污染主页面。关键在于：弹窗内容容器（比如 .layer-content 或 dialog > div）必须有独立的 overflow-y: auto 和明确高度，才能触发其内部滚动，进而用 CSS 伪元素单独美化。
常见错误是直接给 body 写 ::-webkit-scrollbar，结果整个页面滚动条都变了；或者没设高度就指望内容溢出自动滚动，实际只是内容被裁剪、无法滚动。
- 确保弹窗内容区有固定高度（如
max-height: 60vh）且overflow-y: auto - 滚动条样式规则必须限定在该容器内，例如：
.my-popup ::-webkit-scrollbar - Firefox 不支持
::-webkit-scrollbar，需用scrollbar-width和scrollbar-color补充（仅限 Firefox 64+）
Layer 弹窗中自定义滚动条的实操写法
Layer 默认不暴露内容容器 class，scrollbar: false 只关背景滚动，不影响弹窗内部滚动。要美化内部滚动条，得先拿到内容节点再加 class 或直接写带作用域的选择器。
推荐在 success 回调里操作 DOM：
立即学习“前端免费学习笔记（深入）”；
layer.open({
type: 1,
content: $('#form-wrapper'),
area: ['500px', '400px'],
success: function(layero, index) {
// 给弹窗内容区加 class，便于样式隔离
$(layero).find('.layui-layer-content').addClass('custom-scroll');
}
});对应 CSS：
.custom-scroll ::-webkit-scrollbar {
width: 8px;
}
.custom-scroll ::-webkit-scrollbar-thumb {
background-color: #64b5f6;
border-radius: 4px;
}
/* Firefox */
.custom-scroll {
scrollbar-width: thin;
scrollbar-color: #64b5f6 #f5f5f5;
}
<dialog> 本身不滚动，滚动行为完全由内部结构决定。封装时最容易忽略的是：没有显式设置 dialog > div 的 max-height 和 overflow，导致内容撑开弹窗、失去滚动能力。
- 结构建议：<dialog><div class="dialog-body">…</div></dialog>
- 必须给
.dialog-body设max-height: 70vh+overflow-y: auto - 滚动条样式只能作用于
.dialog-body，不能写dialog::-webkit-scrollbar（无效） - 注意 Safari 对
dialog::backdrop的渲染 bug，若 backdrop 遮罩下仍可滚背景，需额外加body { overflow: hidden; }并在 close 后恢复
滚动条样式跨浏览器兼容的底线写法
不是所有浏览器都支持完整伪元素，能稳定生效的只有三处：Chrome/Edge/Safari 的 ::-webkit-scrollbar 系列，Firefox 的 scrollbar-width 和 scrollbar-color。别试图用 JS 模拟滚动条——性能差、无障碍差、维护成本高。
最小可用组合：
.scrollable-area {
/* Firefox */
scrollbar-width: thin;
scrollbar-color: #4285f4 #e0e0e0;
}
.scrollable-area ::-webkit-scrollbar {
width: 8px;
}
.scrollable-area ::-webkit-scrollbar-track {
background: #f0f0f0;
}
.scrollable-area ::-webkit-scrollbar-thumb {
background: #4285f4;
border-radius: 4px;
}真正容易被忽略的是：滚动条宽度变化会影响容器内边距布局，尤其是弹窗内容紧贴右边界时。加 padding-right: 8px 或用 calc() 预留空间，比等出问题再调试更省时间。
