在 Chrome 上使用自定义滚动条样式时，下角会出现一个白色方块。如何消除这个现象呢？

Question

我在 div 上有一个 Chrome 的自定义滚动条样式。当两个滚动条都显示时，右下角会出现一个白色方块。

<div class="scrollbox" id='a'>
    
</div>


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;
}


var a=document.getElementById('a');
for(var i=0; i<10; i++) {
    a.innerHTML+='<br>'+i + ' aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
}

这是重现代码： https: //codepen.io/nosachamos/pen/xxLOryr

看起来像这样：

我怎样才能把它变成黑色，这样它就不会出现了？

Answer 1

尝试一下：

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

任何 alpha 为 0 的内容都应该是不可见的，但如果您愿意，您可以将其设置为黑色或其他颜色。在 Codepen 上的 Chrome 上进行了测试，运行良好！