如何从JavaScript设置文本区域元素的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 Developer Network (MDN)文档获取更多关于如何使用CSS::-webkit-scrollbar伪元素为滚动条设置样式的信息:https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

在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>