layui文本域滚动条样式失效主因是选择器未精准指向textarea元素、权重不足或父容器overflow:hidden遮挡；需用.layui-form-item .layui-textarea textarea::-webkit-scrollbar并加!important，同时添加-webkit-overflow-scrolling:touch和will-change:scroll-position提升滚动性能。
layui文本域滚动条样式被忽略的常见原因
直接给 textarea 写 ::-webkit-scrollbar 无效，是因为 layui 的文本域（.layui-textarea）通常被包裹在带 overflow: hidden 的父容器里，或者你写的样式权重不够、没命中真实渲染节点。
更关键的是：layui 并不接管 textarea 的滚动条样式，它只是用 CSS 包裹并增强交互，滚动条仍由原生 textarea 控制 —— 所以必须精准作用于它本身，而不是外层 div。
- 错误写法：
.layui-textarea::-webkit-scrollbar→ 实际生效的是内部textarea元素，不是这个 class 容器 - 漏加
!important→ layui 自带 CSS 权重高，普通声明会被覆盖 - 没限定作用域 → 全局
::-webkit-scrollbar会污染其他组件（如表格、弹层）
如何精准美化 layui 文本域的滚动条
必须把选择器指向真实的 textarea 元素，并确保它在 layui 初始化后已挂载 DOM。推荐写法：
.layui-form-item .layui-textarea textarea::-webkit-scrollbar {
width: 6px;
}
.layui-form-item .layui-textarea textarea::-webkit-scrollbar-track {
background-color: #f5f5f5;
border-radius: 3px;
}
.layui-form-item .layui-textarea textarea::-webkit-scrollbar-thumb {
background-color: #c0c0c0;
border-radius: 3px;
}
.layui-form-item .layui-textarea textarea::-webkit-scrollbar-thumb:hover {
background-color: #999;
}
注意三点：
- 用
.layui-form-item .layui-textarea textarea而不是.layui-textarea，确保只影响表单内的文本域 - 所有规则末尾加
!important（除非你确认样式加载顺序绝对靠后） - Firefox 不支持
::-webkit-scrollbar，无需处理；IE 已淘汰，不用兼容
移动端 textarea 滚动卡顿或无法拖动
iOS Safari 和部分安卓 WebView 下，textarea 横向/纵向滚动容易失灵，根本原因是缺少硬件加速触发和滚动行为声明。
需在 textarea 上额外加这两条 CSS：
-
-webkit-overflow-scrolling: touch→ 启用惯性滚动 -
will-change: scroll-position→ 提前告知浏览器该元素会滚动，提升渲染性能
完整写法示例：
.layui-form-item .layui-textarea textarea {
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
注意：这两条不能写在 ::-webkit-scrollbar 规则里，必须作用于 textarea 本体。
动态生成的文本域滚动条样式失效
如果文本域是通过 form.render() 或异步模板（如 templet）动态插入的，CSS 可能因 DOM 尚未就位而未生效。
稳妥做法是在 form 渲染完成后手动触发一次样式补丁：
form.render();
// 确保 textarea 已挂载再加样式
setTimeout(() => {
$('.layui-textarea textarea').css({
'-webkit-overflow-scrolling': 'touch',
'will-change': 'scroll-position'
});
}, 10);
更健壮的方式是监听 textarea 插入事件，但多数场景下 setTimeout 已足够 —— 关键是别在 form.render() 前就操作 DOM。
真正容易被忽略的点：滚动条美化只对有溢出内容的 textarea 生效；如果内容刚好撑满、没超出可视区域，伪元素压根不会渲染，调试时别误判为样式没起作用。
