Chrome浏览器自定义div滚动条时右下角出现白色方块如何消除？

这个白色方块是Chrome滚动条的角落区域（对应::-webkit-scrollbar-corner伪元素），当水平和垂直滚动条同时出现时会默认显示，我们只需要给这个伪元素设置和容器一致的背景色就能解决。

你只需要在现有的CSS代码里添加下面这行样式：

::-webkit-scrollbar-corner {
  background-color: black; /* 和你的div、body背景色保持一致 */
}

如果想让hover状态下的角落区域和滚动条轨道风格统一，也可以补充对应的hover规则（不过静态设置已经能解决白色方块问题）：

.scrollbox:hover::-webkit-scrollbar-corner {
  background-color: #222; /* 和滚动条轨道色一致 */
}

修改后的完整CSS代码如下：

body { background: black; }
div { height: 100px; width: 200px; margin: 0 auto; overflow: auto; background: black; color: white; }
.scrollbox:hover::-webkit-scrollbar-thumb:hover { background-color: #888; }
.scrollbox:hover::-webkit-scrollbar-thumb { visibility : visible; background-color: #666; border-radius: 4px; }
.scrollbox:hover::-webkit-scrollbar { background-color: #222; border-radius: 4px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
/* 新增的角落样式，消除白色方块 */
::-webkit-scrollbar-corner {
  background-color: black;
}

这样设置后，角落的白色方块就会被黑色覆盖，和整体背景融为一体了。

内容的提问来源于stack exchange，提问作者Edy Bourne