Layui滚动条需针对各组件容器单独设置样式，因全局::-webkit-scrollbar仅作用于最外层；必须用具体选择器如.layui-table-box .layui-table-body::-webkit-scrollbar并加!important，且Firefox/IE无需处理。
只改 ::-webkit-scrollbar 为什么没生效
因为 Layui 的滚动条不是挂在 body 或 html 上，而是分散在多个带溢出的内部容器里：表格体、弹层内容、下拉菜单、文本域……每个都要单独定位。你写一条全局 ::-webkit-scrollbar，只能覆盖最外层，对 .layui-table-body 或 .layui-layer-content 这类嵌套容器完全无效。
常见错误现象：textarea 滚动条变美了，但表格横向滚动条还是丑；弹层高度超了没滚动条；下拉框选项多时直接被裁掉。
- 必须用具体选择器限定作用范围，比如
.layui-table-box .layui-table-body::-webkit-scrollbar - 所有规则末尾加
!important，否则 Layui 内联样式或高权重 CSS 会覆盖你写的 - Firefox 不支持
::-webkit-scrollbar，无需处理；IE 已淘汰，也不用管
.layui-table-body 横向滚动条美化要点
Layui 表格的横向滚动条实际作用在 .layui-table-body 这个 div 上，不是 .layui-table，也不是 .layui-table-box —— 后者默认 overflow: hidden，改它没用。
关键样式要这样写：
.layui-table-box .layui-table-body::-webkit-scrollbar { width: 6px !important; }
.layui-table-box .layui-table-body::-webkit-scrollbar-track { background: #f1f1f1 !important; border-radius: 3px !important; }
.layui-table-box .layui-table-body::-webkit-scrollbar-thumb { background: #c1c1c1 !important; border-radius: 3px !important; }
.layui-table-box .layui-table-body:hover::-webkit-scrollbar-thumb { background: #999 !important; }
- 如果用了
fixed: true固定列，仅美化不够——.layui-table-fixed和.layui-table-body是两个独立滚动容器，需额外监听scroll事件手动同步scrollLeft - 移动端滑动卡顿？给
.layui-table-body加上-webkit-overflow-scrolling: touch和will-change: scroll-position - 别忘了外层容器（如父级
div）设明确宽度 +overflow: hidden，否则会撑破布局
.layui-layer-content 和 .layui-form-select dl 的滚动条怎么一并覆盖
弹层和下拉框的滚动条位置更隐蔽：.layui-layer-content 控制弹窗内容溢出，.layui-form-select dl 控制下拉选项列表。它们不继承全局滚动条样式，必须显式声明。
示例规则：
.layui-layer-page .layui-layer-content::-webkit-scrollbar,
.layui-layer-iframe .layui-layer-content::-webkit-scrollbar { width: 6px !important; }
.layui-form-select dl::-webkit-scrollbar { width: 6px !important; }
.layui-form-select dl::-webkit-scrollbar-track { background: #f5f5f5 !important; border-radius: 3px !important; }
.layui-form-select dl::-webkit-scrollbar-thumb { background: #c0c0c0 !important; border-radius: 3px !important; }
-
.layui-layer-content必须配合overflow-y: auto !important才能触发滚动条，光美化没用 - 下拉框若动态加载选项，CSS 硬写
max-height可能错位，得用 JS 算真实dl高度再设 - 不要写成
.layui-form-selectdl（少空格），这是无效选择器
移动端 textarea 滚动失灵怎么办
iOS Safari 和部分安卓 WebView 下，textarea 滚动经常卡顿或无法拖动，根本原因不是样式问题，而是缺少滚动行为声明和硬件加速触发。
除了美化滚动条，还必须加这两条 CSS：
.layui-form-item .layui-textarea textarea {
-webkit-overflow-scrolling: touch !important;
will-change: scroll-position !important;
}
- 选择器一定要精确到
.layui-form-item .layui-textarea textarea，不能只写.layui-textarea，否则可能影响其他元素 - 如果页面有多个
textarea，建议加自定义 class 区分，避免误伤 - 测试时注意：真机调试比 Chrome 模拟器更准，尤其是 iOS 上的惯性滚动表现
真正难搞的从来不是写几行 CSS，而是找到那个「正在滚动」的 DOM 节点——Layui 把滚动逻辑拆得太散，每个组件都自己造轮子，你得一个一个揪出来修。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
