CSS customized scroll bar in div

Question

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page?

Answer 1

I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility.

Scroll Bar CSS Support

Currently, there exists no cross-browser scroll bar CSS styling definitions. The W3C article I mention at the end has the following statement and was recently updated (10 Oct 2014):

Some browsers (IE, Konqueror) support the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-")

Microsoft

As others have mentioned, Microsoft supports scroll bar styling, but only for IE8 and above.

Example:

<!-- language: lang-css -->

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }

Chrome & Safari (WebKit)

Similarly, WebKit now has its own version:

• Styling scrollbars: https://www.webkit.org/blog/363/styling-scrollbars/
• Demo of all WebKit scroll bar styling

• From Custom scrollbars in WebKit, relevant CSS:

  /* pseudo elements */
  ::-webkit-scrollbar              {  }
  ::-webkit-scrollbar-button       {  }
  ::-webkit-scrollbar-track        {  }
  ::-webkit-scrollbar-track-piece  {  }
  ::-webkit-scrollbar-thumb        {  }
  ::-webkit-scrollbar-corner       {  }
  ::-webkit-resizer                {  }
  
  /* pseudo class selectors */
  :horizontal
  :vertical
  :decrement
  :increment
  :start
  :end 
  :double-button
  :single-button
  :no-button
  :corner-present
  :window-inactive
  

Firefox (Gecko)

As of version 64 Firefox supports scrollbar styling through the properties scrollbar-color (partially, W3C draft) and scrollbar-width (W3C draft). Some good information about the implementation can be found in this answer.

Cross-browser Scroll Bar Styling

JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.

• 20 jQuery Scrollbar plugin with examples (July 24, 2012)
  • NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices
  • jQuery custom content scroller
  • Tiny Scrollbar – A lightweight jQuery plugin
  • etc.
• 30+ JavaScript/Ajax Techniques for Sliders, Scrollers and Scrollbars (May 07, 2008)
• 21 Useful Scrollbar CSS/JavaScript Styling Tutorials (August, 2012)
• 15+ Free and Premium jQuery Scrolling Plugins (August 26, 2012)

The list could go on. Your best bet is to search around, research, and test the available solutions. I am sure you will be able to find something that will fit your needs.

Prevent Illegal Scroll Bar Styling

Just in case you want to prevent scroll bar styling that hasn't been properly prefixed with "-vendor", this article over at W3C provides some basic instructions. Basically, you'll need to add the following CSS to a user style sheet associated with your browser. These definitions will override invalid scroll bar styling on any page you visit.

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Duplicate or Similar Questions / Source Not Linked Above

• Changing the scrollbars' style
• CSS scrollbar style cross browser
• How to create a custom scrollbar on a div (Facebook style)

Note: This answer contains information from various sources. If a source was used, then it is also linked in this answer.

Answer 2

Here's a webkit example which works for Chrome and Safari:

CSS:

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

Output:

Answer 3

Give this a try

Source : https://nicescroll.areaaperta.com/

Simple Implementation

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

It is a jQuery plugin scrollbar, so your scrollbars are controllable and look the same across the various OS's.

Answer 4

Like many people, I was looking for something that was:

• Consistently styled and functional across most modern browsers
• Not some ridiculous 3000-line bloated jQuery extension cr*p

...But alas - nothing!

Well if a job's worth doing... I was able to get something up and running in about 30 mins. Disclaimer: there's quite a few known (and probably a few as yet unknown) problems with it, but it makes me wonder what on Earth the other 2920 lines of JS are there for in many offerings!

(window => {

  let initCoords;

  const coords_update = e => {
    if (initCoords) {
      const elem = initCoords.bar.closest('.scrollr');
      const eSuffix = initCoords.axis.toUpperCase();
      const sSuffix = initCoords.axis == 'x' ? 'Left' : 'Top';
      const dSuffix = initCoords.axis == 'x' ? 'Width' : 'Height';
      const max = elem['scroll' + dSuffix] - elem['client' + dSuffix];
      const room = elem['client' + dSuffix] - initCoords.bar['client' + dSuffix];
      const delta = e['page' + eSuffix] - initCoords.abs;
      const abs = initCoords.p0 + delta;
      elem['scroll' + sSuffix] = max * abs / room;
    }
  };

  const scrollr_resize = elem => {
    const xBar = elem.querySelector('.track.x .bar');
    const yBar = elem.querySelector('.track.y .bar');
    const xRel = elem.clientWidth / elem.scrollWidth;
    const yRel = elem.clientHeight / elem.scrollHeight;
    xBar.style.width = (100 * xRel).toFixed(2) + '%';
    yBar.style.height = (100 * yRel).toFixed(2) + '%';
  };

  const scrollr_init = elem => {
    const xTrack = document.createElement('span');
    const yTrack = document.createElement('span');
    const xBar = document.createElement('span');
    const yBar = document.createElement('span');
    xTrack.className = 'track x';
    yTrack.className = 'track y';
    xBar.className = 'bar';
    yBar.className = 'bar';
    xTrack.appendChild(xBar);
    yTrack.appendChild(yBar);
    elem.appendChild(xTrack);
    elem.appendChild(yTrack);
    elem.addEventListener('wheel', scrollr_OnWheel);
    elem.addEventListener('scroll', scrollr_OnScroll);
    xTrack.addEventListener('wheel', xTrack_OnWheel);
    xTrack.addEventListener('click', xTrack_OnClick);
    xTrack.addEventListener('mouseover', () => xTrack.classList.add('active'));
    xTrack.addEventListener('mouseout', () => {
      if (!initCoords) xTrack.classList.remove('active');
    });
    yTrack.addEventListener('click', yTrack_OnClick);
    yTrack.addEventListener('mouseover', () => yTrack.classList.add('active'));
    yTrack.addEventListener('mouseout', () => {
      if (!initCoords) yTrack.classList.remove('active');
    });
    xBar.addEventListener('click', bar_OnClick);
    xBar.addEventListener('mousedown', xBar_OnMouseDown);
    yBar.addEventListener('click', bar_OnClick);
    yBar.addEventListener('mousedown', yBar_OnMouseDown);

    scrollr_resize(elem);
  };

  window.addEventListener('load', e => {
    const scrollrz = Array.from(document.querySelectorAll('.scrollr'));
    scrollrz.forEach(scrollr_init);
  });

  window.addEventListener('resize', e => {
    const scrollrz = Array.from(document.querySelectorAll('.scrollr'));
    scrollrz.forEach(scrollr_resize);
  });

  window.addEventListener('mousemove', coords_update);
  window.addEventListener('mouseup', e => {
    initCoords = null;
    Array.from(document.querySelectorAll('.track.active'))
      .forEach(elem => elem.classList.remove('active'));
  });

  function xBar_OnMouseDown(e) {
    const p0 = this.offsetLeft;
    initCoords = {
      axis: 'x',
      abs: e.pageX,
      bar: this,
      p0
    };
  }

  function yBar_OnMouseDown(e) {
    const p0 = this.offsetTop;
    initCoords = {
      axis: 'y',
      abs: e.pageY,
      bar: this,
      p0
    };
  }

  function bar_OnClick(e) {
    e.stopPropagation();
  }

  function xTrack_OnClick(e) {
    const elem = this.closest('.scrollr');
    const xBar = this.querySelector('.bar');
    let unit = elem.clientWidth - 30;
    if (e.offsetX <= xBar.offsetLeft) unit *= -1;
    elem.scrollLeft += unit;
  }

  function yTrack_OnClick(e) {
    const elem = this.closest('.scrollr');
    const yBar = this.querySelector('.bar');
    let unit = elem.clientHeight - 30;
    if (e.offsetY <= yBar.offsetTop) unit *= -1;
    elem.scrollTop += unit;
  }

  function xTrack_OnWheel(e) {
    e.stopPropagation();
    const elem = this.closest('.scrollr');
    const left0 = elem.scrollLeft;
    const delta = e.deltaY !== 0 ? e.deltaY : e.deltaX;
    elem.scrollLeft += delta;
    const moved = left0 !== elem.scrollLeft;
    if (moved) e.preventDefault();
  }

  function scrollr_OnWheel(e) {
    const left0 = this.scrollLeft;
    const top0 = this.scrollTop;
    this.scrollLeft += e.deltaX;
    this.scrollTop += e.deltaY;
    const moved = left0 !== this.scrollLeft || top0 !== this.scrollTop;
    if (moved) e.preventDefault();
  }

  function scrollr_OnScroll(e) {
    const xTrack = this.querySelector('.track.x');
    const yTrack = this.querySelector('.track.y');
    const xBar = xTrack.querySelector('.bar');
    const yBar = yTrack.querySelector('.bar');

    const xMax = this.scrollWidth - this.clientWidth;
    const yMax = this.scrollHeight - this.clientHeight;
    const xFrac = this.scrollLeft / xMax;
    const yFrac = this.scrollTop / yMax;
    const xAbs = xFrac * (this.clientWidth - xBar.clientWidth);
    const yAbs = yFrac * (this.clientHeight - yBar.clientHeight);

    xTrack.style.left = this.scrollLeft + 'px';
    xTrack.style.bottom = -this.scrollTop + 'px';
    xBar.style.left = xAbs + 'px';

    yTrack.style.top = this.scrollTop + 'px';
    yTrack.style.right = -this.scrollLeft + 'px';
    yBar.style.top = yAbs + 'px';
  };

})(window);

.scrollr {
  overflow: hidden;
  position: relative;
}

.track {
  position: absolute;
  cursor: pointer;
  transition: background-color .3s;
  user-select: none;
}

.track.x {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
}

.track.y {
  top: 0;
  right: 0;
  height: 100%;
  width: 10px;
}

.bar {
  position: absolute;
  background-color: yellow;
  transition: background-color .3s, opacity .3s, width .3s, height .3s, margin .3s;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .7;
}

.track.x .bar {
  min-width: 25px;
  height: 3px;
  margin: 5px 0 2px 0;
}

.track.y .bar {
  min-height: 25px;
  width: 3px;
  margin: 0 2px 0 5px;
}

.track.active {
  background-color: #ccc;
}

.track.active .bar {
  background-color: #999;
  margin: 0;
  opacity: 1;
}

.track.x.active .bar {
  height: 10px;
}

.track.y.active .bar {
  width: 10px;
}


/* Custom client stuff */

.content {
  background: red;
}

.content p {
  width: 450px;
  margin: 0;
}

.scrollr {
  max-width: 350px;
  max-height: 150px;
}

<div class="scrollr content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
    vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
    dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
    vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
  <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
    Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
  <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
    Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
    vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
    dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
    vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
  <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
    Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
  <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
    Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
    vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
    dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
    vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
  <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
    Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
  <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
    Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
    vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
    dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
    vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
  <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
    Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
  <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
    Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
    vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
    dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
    vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
  <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
    Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
  <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
    Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
    vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
    dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
    vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
  <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
    Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
  <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
    Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
</div>

Answer 5

Firefox new version(64) support CSS Scrollbars Module Level 1

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

https://codepen.io/fatihhayri/pen/pqdrbd

Answer 6

Please check this link. Example with working demo

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

CSS Scroll Bars