Webkit 滚动条 CSS，角落里总是一个白框

Question

有什么方法可以避免出现在自定义样式的 webkit 滚动条上的默认白框吗？

只有在水平和垂直溢出时才会出现白框。 (使用 Google Chrome)

编辑：我已经尝试将 body 背景设置为不同的颜色 - 仍然只看到一个白色框。

截图：

CSS:

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(0,0,0,0.35);
}
::-webkit-scrollbar-corner {
  background: #0c0c0c;
}

Answer 1

不，没有办法避免白框。
您可以设置它的背景颜色（就像您在中将其设为灰白色一样：
::-webkit-scrollbar-corner { background: #0c0c0c; }
我们在这里处理伪元素，颜色 under ::-webkit-scrollbar-corner 是白色。因此，为了让自定义的 webkit 滚动条与您的布局融为一体，您始终必须注意角的颜色，并记住透明度高于白色。

Answer 2

虽然 E.C.Pabon 提供的答案在技术上是正确的，但真正的错误是 Chrome x64 上的 50 Linux 有一个 GTK 集成错误。自 Chrome 51 起，问题已得到解决。

Answer 3

这有点过时了，但在 chrome 中，您可以将背景颜色设置为 rgba(0,0,0,0)。任何带有 alpha 0 和方框的东西都不会显示 :)！

::-webkit-scrollbar-corner {
  background: rgba(0,0,0,0);
}

Answer 4

如果你只需要垂直滚动条你可以使用

overflow-y: scroll;

白色是x滚动条和y滚动条

之间的space

希望能解决你的问题

Answer 5

如 E.C.Pabon 所述，您可以使用

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

标签，将背景颜色设置为透明对我有用。

::-webkit-scrollbar-corner {background-color: transparent;}

Webkit 滚动条 CSS，角落里总是一个白框

Webkit scrollbar CSS, always a white box in corner

css

webkit

google-chrome