如何在根级别正确设置CSS滚动条样式

你当前的嵌套写法解析后等价于后代选择器body ::-webkit-scrollbar，只能匹配body内部子元素生成的滚动条，根本选不到页面顶层的视口滚动条。
另外浏览器默认的页面根滚动条是绑定在<html>根元素上的，和body元素无关，把滚动条样式挂在body选择器下从一开始就选错了生效对象。

• 根滚动条的伪元素规则不要嵌套在body选择器内，直接绑定到代表根节点的:root选择器（和html选择器等价）上即可。
• overflow-y: scroll这类滚动行为相关的属性可以单独留在body的规则块里，不影响滚动条样式生效。

可直接生效的代码写法：

body {
  overflow-y: scroll;
}

/* Webkit内核浏览器根滚动条样式 */
:root::-webkit-scrollbar {
  width: 10px;
}
:root::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color);
  border-radius: 5px;
}
:root::-webkit-scrollbar-track {
  background-color: var(--scroll-back-color);
  width: 5px;
}

如果你用支持原生CSS嵌套的环境、或者Sass/Less这类预处理器，想保留嵌套写法，就把滚动条规则挪到:root的规则块里，不要放在body块下：

:root {
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color);
    border-radius: 5px;
  }
  ::-webkit-scrollbar-track {
    background-color: var(--scroll-back-color);
    width: 5px;
  }
}

body {
  overflow-y: scroll;
}

兼容提示：Firefox不支持::-webkit-scrollbar系列伪元素，要设置根滚动条样式需要给:root加两个专属属性：scrollbar-width: thin;控制宽度，scrollbar-color: var(--scroll-thumb-color) var(--scroll-back-color);控制滑块和轨道颜色。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture