如何从 JavaScript 设置 textarea 元素的 WebKit 滚动条样式？

Question

我有一个 textarea DOM 元素。我在上面设置了一些样式，例如：

textArea.style.border = "2px";

一切都很好。但是我如何设置 WebKit 样式，比如拇指颜色？

我试过以下方法：

textArea.style.webkitScrollbarThumbColor = "#ff0000";

和

textarea.style.scrollbarThumbColor = '#ff0000';

和

textarea.style.scrollbarColor = '#ff0000 #ff0000';

这些都不起作用。我正在使用 Chrome 浏览器进行测试。

感谢您的帮助。

Answer 1

自定义滚动条涉及设置与滚动条关联的伪元素的属性。您可以参考 Mozilla 开发者网络 (MDN) 文档，了解有关如何使用 CSS

::-webkit-scrollbar

伪元素设置滚动条样式的更多信息：https://developer.mozilla.org/en-US/docs/Web/ CSS/::-webkit-滚动条

在 JavaScript 中，你不能直接选择一个伪元素。但是，您可以通过使用 CSS 变量设置滚动条宽度，然后使用 JavaScript 修改 CSS 变量来实现类似的效果。以下示例演示了如何执行此操作：

document.querySelector('textarea').style.setProperty('--scrollbarWidth', '12px');

这里是完整的示例代码：

document.querySelector('textarea').style.setProperty('--scrollbarWidth', '12px');

textarea {
  overflow: auto;
  height: 150px;
  --scrollbarBG: white;
  --scrollbarColor: lightblue;
  --scrollbarWidth: 20px;
}

textarea::-webkit-scrollbar {
  width: var(--scrollbarWidth);
}

textarea::-webkit-scrollbar-track {
  background-color: var(--scrollbarBG)
}

textarea::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarColor);
  border: 3px solid var(--scrollbarBG);
}

<textarea>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</textarea>