-webkit-scrollbar在使用chrome的移动模拟器时有不同的作用（当滚动条在html元素上时）

Question

我尝试使用-webkit-scrollbar自定义chrome上的滚动条样式。

这是我的css片段：

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: red;
}

::-webkit-scrollbar-thumb {
  background-color: blue;
}

基本上它使滚动条宽12px，将轨道设置为红色，滚动条处理为蓝色。

这适用于Chrome，但是当我打开移动模拟器时，滚动条将返回浏览器默认值。

这是Chrome的预期行为，还是我错过了什么？

更新

人们提到了这个演示：https://css-tricks.com/examples/WebKitScrollbars/适用于移动设备和桌面设备。

但它的作用是因为身体上的position:absolute样式导致滚动条附加在body元素上。我发现滚动条是否在主体上，它适用于移动和桌面。

如果我们从body中删除该样式，滚动条将转到html元素。我们将看到它在移动和桌面上的工作方式不同。

Answer 1

您必须将 -webkit-appearance: none; 添加到您的 ::-webkit-scrollbar 才能使其工作