通过为 添加 readonly 属性（而非依赖 pointer-events: none），可在完全禁止编辑的前提下保持原生滚动条可用，这是语义正确、兼容性最佳且纯 HTML/CSS 可实现的解决方案。

通过为 `` 添加 `readonly` 属性（而非依赖 `pointer-events: none`），可在完全禁止编辑的前提下保持原生滚动条可用，这是语义正确、兼容性最佳且纯 html/css 可实现的解决方案。

当使用 pointer-events: none 作用于 时，浏览器会将整个元素（包括滚动条）视为“不可交互区域”，导致滚动条失效——这是因为滚动条本质上属于该元素的内置控件，其操作也受 pointer-events 约束。CSS 本身<strong>无法单独启用滚动条交互而禁用编辑</strong>，这是一个根本性限制。

✅ 正确做法：使用语义化 HTML 属性 readonly
它明确告知浏览器“此字段可聚焦、可滚动、可复制，但不可编辑”，完美匹配你的需求：

<textarea rows="4" class="input" readonly>
内容行1  
内容行2  
内容行3  
...（长内容）
</textarea>

? 补充说明与最佳实践：

• readonly 支持键盘导航（Tab 可聚焦）、鼠标滚动、文字选中与复制，滚动条完全正常；
• 若还需禁止聚焦（避免键盘触发），可额外添加 tabindex="-1" 或 disabled —— 但注意：disabled 会使样式变灰且禁用滚动，不推荐；
• CSS 中无需设置 pointer-events: none，避免干扰原生行为；
• 如需视觉上“去编辑感”，可通过 CSS 自定义样式（如移除边框高亮、禁用 :focus 样式等），而非破坏交互逻辑。

? 总结：readonly 是解决该问题的标准化、无障碍友好、跨浏览器一致的方案。放弃 pointer-events: none 的 hack 思路，回归语义化 HTML，才能兼顾功能、可访问性与维护性。