contenteditable中pre标签滚动条光标未显示为pointer的解决方法

问题出在你没有把cursor: pointer加到正确的滚动条伪元素上——需要给**滚动条滑块（scrollbar-thumb）**设置这个样式，才能让鼠标悬停时显示指针光标。另外由于父元素是contenteditable，光标样式的继承规则对滚动条伪元素不生效，必须单独指定。

修改后的CSS代码：

pre {
  padding: 10px;
  width: calc(100% - 70px);
  overflow-x: scroll;
}

pre::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /* 可选：如果需要鼠标悬停在滚动条轨道上也显示指针，就加上这行 */
  cursor: pointer;
}

pre::-webkit-scrollbar-thumb {
  background: #9c9c9c;
  -webkit-border-radius: 18px;
  /* 关键：给滑块设置指针光标 */
  cursor: pointer;
}

HTML结构无需改动：

<div contenteditable>
  <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate</pre>
</div>

补充说明 #

• 滚动条的可交互核心区域是scrollbar-thumb，只有这个伪元素的cursor设置会直接影响鼠标悬停滑块时的光标样式。
• 若不需要轨道区域也显示指针光标，可以只保留scrollbar-thumb上的cursor: pointer。

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