无法真正隐藏原生 textarea 滚动条，因操作系统和 ua 样式强控制，伪元素无效；可行方案是外层容器 overflow: hidden 裁剪 + textarea padding-right 补偿 + 负 margin 推出滚动条。
layui textarea 隐藏滚动条但保持可滚动，为什么直接加 overflow: hidden 会失效
因为 overflow: hidden 会让 textarea 彻底失去滚动上下文：光标无法移动到可视区域外、scrollTop 读写无效、方向键和屏幕阅读器无法访问被裁内容。layui 的 textarea 默认是原生表单控件，不走自定义滚动逻辑，所以不能靠包裹容器“骗”出滚动能力。
scrollbar-width: none 和 ::-webkit-scrollbar 对 textarea 无效
Firefox 的 scrollbar-width: none 只作用于块级溢出容器（如 div），对 textarea、select 等表单元素完全不生效；WebKit 的 ::-webkit-scrollbar 伪元素在绝大多数浏览器中也不支持 textarea —— 即使写了，Chrome/Safari 也会静默忽略。
- 实测：给
textarea加textarea::-webkit-scrollbar { display: none }→ 控制台无报错，但滚动条照常显示 - 原因：表单控件的滚动条由操作系统或 UA 样式强控制，CSS 伪元素无法穿透
- 替代方案只能绕过原生
textarea，用contenteditable+div模拟，但会丢失name、required、表单序列化等原生能力
真正可行的折中方案：用 CSS 裁剪视觉 + 保留交互
既然无法真正隐藏原生 textarea 的滚动条，就退一步：让它存在但不可见，同时确保滚动行为完整可用。关键不是“删掉”，而是“遮住”。
- 给
textarea外层套一个固定尺寸的div，设overflow: hidden—— 这个容器不参与滚动，只做裁剪 -
textarea自身设overflow: auto、足够大的height（比如120px），并加padding-right: 16px补偿滚动条宽度，避免文字被遮 - 用负
margin或transform: translateX(16px)把滚动条推出父容器右侧边界（值取16px或17px，覆盖主流滚动条宽度） - 必须测试 iOS Safari：它默认不显示滚动条，但手指滑动仍有效；此方案在 iOS 下实际是“白做”，但无副作用
layui 表单中集成时的注意事项
layui 的 form.textarea 渲染后会加 layui-textarea 类和内联样式，容易覆盖自定义规则。需提高 CSS 优先级，并注意渲染时机。
- 不要写
.layui-textarea::-webkit-scrollbar—— 白写，无效 - 推荐写法：
.layui-form-item .layui-textarea { padding-right: 16px; } .layui-form-item .layui-textarea-wrapper { overflow: hidden; position: relative; } - 如果用了
layedit，它内部是 iframe +contenteditable，此时可直接用::-webkit-scrollbar控制其容器，但那是另一套 DOM 结构 - 移动端安卓 WebView 中，部分版本会因
transform导致光标定位偏移，优先用margin-right: -16px替代
最易被忽略的一点：所有“视觉隐藏”方案都依赖用户主动滚动（滚轮、触控、键盘），而不会改变 textarea 的 scrollHeight 或 clientHeight 计算逻辑——这意味着 JS 里判断是否溢出、自动扩容等逻辑依然要按原方式写，别误以为“没滚动条=没溢出”。
