如何在textarea设置pointer-events:none时启用滚动条且保持不可编辑

pointer-events: none会完全禁用元素的所有鼠标交互（包括滚动），所以要实现不可编辑但可滚动的效果，需要用其他CSS属性组合替代，以下是纯CSS解决方案：

textarea {
  /* 恢复鼠标交互，确保滚动条正常工作 */
  pointer-events: auto;
  /* 禁止用户选中文本 */
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  /* 禁止编辑内容，适配主流浏览器 */
  -webkit-user-modify: read-only;
  -moz-user-modify: read-only;
  user-modify: read-only;
  /* 隐藏输入光标 */
  caret-color: transparent;
  /* 可选：禁止调整textarea尺寸 */
  resize: none;
}

各属性作用说明： #

• pointer-events: auto：还原元素的鼠标交互能力，让滚动条可以正常拖动或滚动
• user-select: none：阻止用户选中文本，避免误操作
• user-modify: read-only：核心属性，直接限制textarea内容不可编辑，主流浏览器均支持
• caret-color: transparent：隐藏输入光标，明确告知用户该区域不可编辑
• resize: none：可选配置，防止用户随意调整textarea大小，保持布局一致性

内容的提问来源于stack exchange，提问作者shanmuga priya