在 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 进行了测试，运行良好！

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

When using custom scrollbar style on Chrome, a white square appears on lower corner. How to eliminate this?

html

css

google-chrome

scrollbar