Webkit scrollbar CSS, always a white box in corner

user_1980110 0
Viewed 13812

Is there any way to avoid the default white box that appears on a custom styled webkit scroll bar?

The white box only appears when overflow is going both horizontally and vertically. (Using Google Chrome)

Edit: I have tried setting body background to a different colour - still only seeing a white box.

Screenshot: enter image description here

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;
}
google-chrome webkit css
5 Answers

As E.C.Pabon mentioned, you can use the 

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

tag, setting the background-color to transparent worked for me.

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

if you only need the vertical scrollbar you can use

overflow-y: scroll;

the white is the space between the x-scrollbar and the y-scrollbar

i hope it solve your problem

user_103810050
Related