Webkit 滚动条 CSS，总是在角落里的一个白框答案

【问题标题】：Webkit scrollbar CSS, always a white box in cornerWebkit 滚动条 CSS，总是在角落里的一个白框
【发布时间】：2016-06-28 08:53:48
【问题描述】：

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

只有在水平和垂直溢出时才会出现白框。（使用谷歌浏览器）

编辑：我尝试将 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;
}

【问题讨论】：

标签： css google-chrome webkit

【解决方案1】：

正如 E.C.Pabon 提到的，您可以使用

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

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

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

【讨论】：

【解决方案2】：

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

溢出-y：滚动；

白色是x-滚动条和y-滚动条之间的空间

希望能解决你的问题

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

虽然 E.C.Pabon 提供的答案在技术上是正确的，但真正的错误是 x64 Linux 上的 Chrome 50 存在与 GTK 集成的错误。从 Chrome 51 开始，该问题已得到修复。

【讨论】：

【解决方案5】：

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

【讨论】：

我想知道如何去除白色。哪个元素导致了这个
再说一遍：你不能移除白色，你必须将你想要的颜色设置为伪元素（::-webkit-scrollbar-corner {background-color: red;}）。跨度>
阅读发布的原始代码。 ::-webkit-scrollbar-corner 不会改变白框。
再次：您使用了类似白色的颜色来代替白色。试试 ::-webkit-scrollbar-corner { 背景：红色； } 来看看区别。
您提供的 CSS 工作正常。灰色框仅出现在 CSS 中其他地方的类型不匹配时。