Change Scrollbar via CSS in Chrome

Question

I put border-Radius in my scrollbar, but there are leftovers when the background color is changed, and I would like to know how to remove :

I’d like to keep it that way:

Where you can’t see the ::Webkit-scrollbar-track

body{
  height: 1280px;
  
}
div{
  width:100%;
  height: 500px;
  background: red;
}
::-webkit-scrollbar{
    width: 10px;
    
}
::-webkit-scrollbar-track{
    
    border-radius: 8px;
    background: #ffffff;
    
}
::-webkit-scrollbar-thumb{
    background-color: green;
    border-radius: 8px; 
    
}

<div>Gostaria que a parte vermelha fosse todo o caminho da tela, atrás da barra verde</div>

Answer 1

Take a look at this one, it’s kind of like what you want. Use a little jquery for mobile scrolling and touch features but recommend that from a glance.

Nanoscroller.js

http://jamesflorentino.github.io/nanoScrollerJS/

Tested in desktop browsers/browsers:

• IE7+
• Firefox 3+
• Chrome
• Safari 4+
• Opera 11.60+

Mobile support:

• iOS 5+ (iPhone, iPad and iPod Touch)
• iOS 4 (with a polyfill)
• Android Firefox
• Android 2.2/2.3 Native browser (with a polyfill)
• Android Opera 11.6 (with a polyfill)

To use include the javascript file in the header:

<script src="overthrow.js"></script>

... and add the class in a diva as in the example below:

<div id="about" class="nano">
    <div class="overthrow nano-content"> ... content here ...  </div>
</div>