Webkit滚动条CSS，一直是角落里的白盒子

Question

有没有办法避免自定义样式的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;
}

Answer 1

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

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

Answer 2

不，没有办法避开白盒子 你可以设置它的背景颜色（正如你所做的那样：灰色 - 白色： ::-webkit-scrollbar-corner { background: #0c0c0c; }
我们在这里处理伪元素， 下的颜色::-webkit-scrollbar-corner是白色的。因此，为了让自定义webkit滚动条与您的布局融为一体，您必须始终注意角落的颜色，并记住透明度超过白色。

Answer 3

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

Answer 4

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

  

溢出-y：滚动；

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

我希望它能解决您的问题

Answer 5

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

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

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

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