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

你之前的写法无效的原因是：WebKit内核浏览器（比如Chrome）的滚动条样式是通过CSS伪元素实现的，无法直接通过DOM元素的style对象设置单个属性，也不存在webkitScrollbarThumbColor这类原生style属性。另外scrollbarColor是Firefox支持的标准属性，Chrome不兼容。

下面是两种可行的实现方式：

方式一：通过JS动态创建内嵌样式规则 #

这种方式适合需要在JS里动态控制样式的场景：

// 获取目标textarea元素
const textArea = document.querySelector('textarea');
// 创建style标签
const customStyle = document.createElement('style');
// 编写针对该textarea的滚动条样式规则
customStyle.textContent = `
  ${textArea.tagName.toLowerCase()}#${textArea.id}::-webkit-scrollbar {
    width: 8px; /* 自定义滚动条宽度 */
  }
  ${textArea.tagName.toLowerCase()}#${textArea.id}::-webkit-scrollbar-thumb {
    background-color: #ff0000; /* 设置滑块颜色 */
    border-radius: 4px; /* 可选：给滑块加圆角 */
  }
  ${textArea.tagName.toLowerCase()}#${textArea.id}::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 可选：设置滚动条轨道颜色 */
  }
`;
// 将样式标签插入页面头部
document.head.appendChild(customStyle);

注意：如果你的textarea没有id，也可以用类名等其他选择器定位，确保样式只作用于目标元素。

方式二：通过CSS类关联样式（更推荐） #

这种方式更符合样式与逻辑分离的原则：

1. 先在页面的CSS中定义滚动条样式类：

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #ff0000;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

2. 然后在JS中给目标textarea添加这个类：

const textArea = document.querySelector('textarea');
textArea.classList.add('custom-scrollbar');

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