
当使用 ::-webkit-scrollbar 自定义 旁的滚动条时,鼠标悬停其上会意外显示文本光标(I-beam),而非默认箭头光标;根本原因是 textarea 的 cursor: text 继承影响了滚动条区域,可通过显式设置容器光标为 auto 解决。
当使用 `::-webkit-scrollbar` 自定义 `
在 WebKit 浏览器(如 Chrome、Edge、Safari)中,自定义滚动条(::-webkit-scrollbar)虽独立于内容流渲染,但其交互区域仍受父元素 CSS 光标样式的影响。尤其当
解决方案非常简洁:为滚动条所在的宿主元素(即应用 #editor::-webkit-scrollbar-thumb 的父容器)显式设置 cursor: auto。
该声明会重置光标行为,使滚动条区域恢复系统默认光标(通常为箭头),同时不影响
#editor {
cursor: auto; /* 关键修复:覆盖继承的 text 光标 */
}
✅ 注意事项:
- cursor: auto 是推荐值,它让浏览器根据上下文自动选择最合适的光标(例如在滚动条上显示双箭头,在空白处显示箭头);避免使用 cursor: default(强制箭头,可能掩盖拖拽意图)或 cursor: none(禁用光标,损害可访问性)。
- 此规则需作用于滚动条的直接宿主元素(即 #editor),而非 textarea 本身或 ::-webkit-scrollbar 伪元素——后者不支持 cursor 属性。
- 若 #editor 是
包裹










