能否通过JS在页面切换不同HTML区块时动态调整自定义滚动条配色？

完全可以通过JS动态操控这套自定义滚动条样式。你当前把滚动条颜色绑定CSS变量的写法，已经踩中了动态修改Webkit内核滚动条样式的最佳实践——CSS滚动条伪元素本身不在DOM树内，无法被JS直接选中修改样式，但只要样式值依赖对应作用域的CSS自定义属性，JS只需要改变量值，就能间接驱动滚动条样式自动更新，完全能满足“滚动进区块就互换主色、三级色”的需求。

• 提前整理好不同区块对应的色值映射：因为需求是滚动进入新区块后互换主色、三级色，只需要把相邻区块的两组色值按互换规则提前存好就行，不需要额外设计复杂的切换逻辑
• 用原生IntersectionObserver做区块检测，比传统scroll事件监听的性能开销小很多，不会出现滚动时的卡顿问题：给每个区块设置可见阈值（比如占视口50%以上就判定为进入该区块），触发回调后执行变量更新
• 变量更新不需要操作任何滚动条相关的DOM，直接通过setProperty修改作用域内的自定义属性即可：

  // 进入目标区块时的变量互换逻辑
  const blockPrimaryColor = 当前区块预设的主色值
  const blockTertiaryColor = 当前区块预设的三级色值
  // 互换两个变量的赋值，直接实现滚动条颜色的交叉更换
  document.documentElement.style.setProperty('--primary-color', blockTertiaryColor)
  document.documentElement.style.setProperty('--tertiary-color', blockPrimaryColor)
  

• 如果你的自定义滚动条是绑定在局部滚动容器而非全局页面上，设置CSS变量时要把变量挂在该滚动容器元素上，不要挂在文档根元素上，否则会因为作用域不匹配导致滚动条样式不更新
• 你现有CSS里同时给::-webkit-scrollbar-track和::-webkit-scrollbar-track-piece设置了var(--primary-color)的背景，实际渲染中track-piece会覆盖track的样式，这个不影响动态切换逻辑，只要两个规则绑定的变量一致就不会出现样式冲突

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