求助：纯JS点击按钮修改HTML滚动条颜色失败，求解决办法

你之前用document.body.style.scrollbarBaseColor无效的原因是这个属性是IE专属的非标准属性，现代浏览器已经不再支持了。要修改滚动条颜色，得针对不同浏览器的特性来处理，纯JS实现的话可以用下面两种方案：

方案1：CSS类切换（推荐） #

先在CSS里预定义好默认和切换后的滚动条样式，然后通过JS给body添加/移除类来实现切换：

/* 默认滚动条样式 */
body {
  /* 火狐浏览器：滚动条滑块颜色 + 轨道颜色 */
  scrollbar-color: #1a1a1a transparent;
}
/* Webkit内核浏览器（Chrome/Edge/Safari） */
body::-webkit-scrollbar {
  width: 8px; /* 自定义滚动条宽度 */
}
body::-webkit-scrollbar-thumb {
  background-color: #1a1a1a; /* 滑块颜色 */
  border-radius: 4px; /* 圆角可选 */
}
body::-webkit-scrollbar-track {
  background-color: transparent; /* 轨道颜色 */
}

/* 切换后的红色滚动条样式 */
body.scrollbar-red {
  scrollbar-color: #FF5555 transparent;
}
body.scrollbar-red::-webkit-scrollbar-thumb {
  background-color: #FF5555;
}

然后给按钮绑定点击事件，切换类：

// 假设按钮的id是changeScrollbarBtn
document.getElementById('changeScrollbarBtn').addEventListener('click', function() {
  document.body.classList.toggle('scrollbar-red');
});

方案2：动态创建Style标签 #

如果不想预写CSS类，可以直接用JS创建style标签插入到页面里：

document.getElementById('changeScrollbarBtn').addEventListener('click', function() {
  // 先清除之前可能存在的自定义滚动条样式
  const oldStyle = document.getElementById('custom-scrollbar-style');
  if (oldStyle) oldStyle.remove();

  // 创建新的style标签
  const newStyle = document.createElement('style');
  newStyle.id = 'custom-scrollbar-style';
  newStyle.textContent = `
    body {
      scrollbar-color: #FF5555 transparent;
    }
    body::-webkit-scrollbar-thumb {
      background-color: #FF5555;
    }
  `;
  document.head.appendChild(newStyle);
});

兼容性说明 #

• Webkit内核浏览器（Chrome、Edge、Safari）：依赖::-webkit-scrollbar系列伪元素
• 火狐浏览器：依赖scrollbar-color属性
• IE浏览器：可以用你之前试的scrollbarBaseColor，但现在基本不用考虑IE了

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