当使用 ::-webkit-scrollbar 自定义 <textarea> 旁的滚动条时，鼠标悬停其上会意外显示文本光标（I-beam），而非默认箭头光标；根本原因是 textarea 的 cursor: text 继承影响了滚动条区域，可通过显式设置容器光标为 auto 解决。
当使用 `::-webkit-scrollbar` 自定义 `
在 WebKit 浏览器（如 Chrome、Edge、Safari）中，自定义滚动条（::-webkit-scrollbar）虽独立于内容流渲染，但其交互区域仍受父元素 CSS 光标样式的影响。尤其当 <textarea> 或其外层容器（如 #editor）未显式声明 cursor 时，浏览器可能将滚动条热区视为可文本交互区域，从而继承 cursor: text 行为——这正是你观察到“悬停滚动条却显示 I-beam 光标”的原因。
解决方案非常简洁：为滚动条所在的宿主元素（即应用 #editor::-webkit-scrollbar-thumb 的父容器）显式设置 cursor: auto。
该声明会重置光标行为，使滚动条区域恢复系统默认光标（通常为箭头），同时不影响 <textarea> 内部的文本编辑光标：
#editor {
cursor: auto; /* 关键修复：覆盖继承的 text 光标 */
}✅ 注意事项：
- cursor: auto 是推荐值，它让浏览器根据上下文自动选择最合适的光标（例如在滚动条上显示双箭头，在空白处显示箭头）；避免使用 cursor: default（强制箭头，可能掩盖拖拽意图）或 cursor: none（禁用光标，损害可访问性）。
- 此规则需作用于滚动条的直接宿主元素（即 #editor），而非 textarea 本身或 ::-webkit-scrollbar 伪元素——后者不支持 cursor 属性。
- 若 #editor 是 <div> 包裹 <textarea> 的容器，请确保该容器未被 pointer-events: none 等属性干扰。
- 此问题仅影响 WebKit 滚动条；Firefox（scrollbar-width）和标准滚动条不受此 CSS 规则影响，无需额外处理。
完成修复后，你的滚动条将正常响应悬停：拖拽拇指时显示垂直双箭头（ns-resize），悬停轨道时显示箭头，且与页面主滚动条行为一致。这一方案轻量、兼容性强，是现代自定义滚动条开发中的最佳实践之一。
