Блог

У меня есть собственный стиль полосы прокрутки для Chrome в div. Когда отображаются обе полосы прокрутки, в правом нижнем углу появляется белый квадрат.

 <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

Выглядит так:

Как я могу сделать это черным, чтобы оно не появилось?

Дайте этому попробовать:

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

Все, что имеет альфа-значение 0, должно быть невидимым, но вы можете установить его черным или другим цветом, если хотите. Протестировано в Chrome на вашем Codepen и отлично работает!