Feel free to give this a go

Credit :

Straightforward Implementation

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

It functions as a jQuery plugin scrollbar, providing you with controllable scrollbars that maintain a consistent appearance across different operating systems.

For more details, please visit the following link:
CSS Scroll Bars

You can see a live demonstration below:

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

To create custom scroll bars on a website, using CSS alone is not enough - JavaScript is required for some added magic.

While certain browsers may support non-standard CSS rules like ::-webkit-scrollbar in Webkit, this solution is not ideal as it only works in Webkit browsers. Internet Explorer used to have a similar feature, but it seems to no longer be supported.

Just like many others, I was on the hunt for something that met these criteria:

• Consistently styled and functional in most modern browsers
• Avoiding excessive bloat and complexity like those 3000-line jQuery extensions

...To my dismay, there wasn't much out there!

But hey, if you want something done right... I managed to whip up a working solution in about 30 minutes. Disclaimer: There are quite a few known (and probably some unknown) issues with it, but it got me thinking - what's the deal with those other 2920 lines of JS in many similar offerings?

(window => {

  let initCoords;

  const coords_update = e => {
    // Function logic here
  };

  const scrollr_resize = elem => {
    // Function logic here
  };

  const scrollr_init = elem => {
    // Function logic here
  };

  window.addEventListener('load', e => {
    // Event listener logic here
  });

  window.addEventListener('resize', e => {
    // Event listener logic here
  });

  window.addEventListener('mousemove', coords_update);
  window.addEventListener('mouseup', e => {
    // Event listener logic here
  });

  function xBar_OnMouseDown(e) {
    // Function logic here
  }

  // More functions and event listeners...

})(window);

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

// CSS styling rules here

</div>

<div class="scrollr content">
  <p>Sample text lorem ipsum...</p>
  <p>More lorem ipsum...</p>
  <p>Additional lorem ipsum...</p>
  <p>Even more lorem ipsum...</p>
  <p>And another batch of lorem ipsum...</p>
  <p>Final lorem ipsum...</p>
</div>

My exploration of various plugins led me to discover that many do not offer full browser support. In my experience, iScroll and nanoScroller have proven to be reliable across multiple browsers:

• IE11 - IE6
• IE10 - WP8
• IE9 - WP7
• IE Xbox One
• IE Xbox 360
• Google Chrome
• FireFox
• Opera
• Safari

However, it should be noted that iScroll does not function properly on touch devices.

To see a demonstration of iScroll, visit:
For a demo of nanoScroller, check out:

    .customClass::-webkit-scrollbar {
      width: 10px;
      background-color: rgba(0,0,0,0);
    }
    
    .customClass::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.5);
      border-radius: 5px;
    }

created a sleek mobile/OSX-inspired scrollbar for my design.

Firefox's latest version (64) now includes support for the 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

Below is a sample code snippet tailored for Chrome and Safari:

Cascading Style Sheets (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;
}

Result:

If you want to add custom scrollbars to specific div elements in your HTML files, there is a way to do it. Here's an example that can guide you: https://codepen.io/adeelibr/pen/dKqZNb. To apply custom scrollbars, you can use the following code:

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

The CSS styling for this would be:

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#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;
}

Google has been implementing a clever trick in some of its applications for quite some time now. By using specific classes in the code, they are able to hide the scrollbar in Chrome without disabling its functionality.

The classes used for this purpose are jfk-scrollbar, jfk-scrollbar-borderless, and jfk-scrollbar-dark.

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
...
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}

<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>

http://jsfiddle.net/76kcuem0/32/

This technique has proven to be very useful in removing scrollbars with arrows, as seen in Google Maps back in 2015 when browsing through results in their material design UI.

Most browsers do not support the Webkit scrollbar.

However, it is supported on CHROME

For a demo of the webkit scrollbar, visit: Webkit Scrollbar DEMO

For more examples, check out: More Examples

Another method to consider is using the Jquery Scroll Bar Plugin

This plugin is compatible with all browsers and easy to apply

You can download the plugin from: Download Here

For instructions on how to use and for more options, visit: CHECK THIS

To see a demo of the Jquery Scroll Bar Plugin in action, click here: DEMO

I experimented with various JS and CSS scroll options, and I discovered that this one was remarkably easy to implement. It underwent testing on IE, Safari, and Firefox, and functioned perfectly.

As suggested by @thebluefox

Here is how you can use it:

Add the following script to your code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

Insert the following code where you want the scrolling functionality:

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Goes Here**
</div>

For more information, please visit the plugin page

FaceScroll Custom Scrollbar

I hope this proves helpful

Imagine you have a div like this:

<div class="custom_scroll"> ... </div>

To style it with CSS, use the following code:

// Custom scroll style definitions
.custom_scroll {
  overflow-y: scroll;
}

// Customize scrollbar appearance
.custom_scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar {
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

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

The styled scroll will look like this:

https://i.sstatic.net/IMuTr.png

I have expertly designed a custom scrollbar solution that is compatible across all browsers, blending aesthetics with functionality seamlessly. This design has been validated through extensive testing on various platforms. HTML Code

<div class="scrollbar">
      Dummy Text Lorem ipsum asperiores, dolor magni culpa voluptas maiores? Quidem fuga illum consequuntur maxime eius sed, assumenda
      necessitatibus provident nostrum cupiditate odit animi laboriosam ipsum libero rerum voluptatem repellat dolores
      reprehenderit dolorem. Dolorum iusto nam nisi assumenda nihil harum quis sed veritatis debitis, pariatur provident
      aliquid eius, voluptatem repudiandae? Aperiam repellendus tempora ullam sapiente. Officia, quaerat! Voluptatum,
      fugit?
</div>

Plain CSS Code

.scrollbar {
  overflow-y: auto;
  overflow-x: hidden;
  width: 200px;
  height: 200px;
  padding: 10px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}
.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(83, 83, 83, 0.07);
  background-color: #f1f1f1;
}
.scrollbar::-webkit-scrollbar {
  width: 7px;
  background-color: #f1f1f1;
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}

Please check out the demo to see it in action. Thanks.

If you're on the search for a reliable solution, look no further than this fantastic plugin I stumbled upon called simplebar

Simplebar is a vanilla JavaScript library that offers custom scrollbars with native scrolling capabilities. It's simple to use, lightweight, and works seamlessly across different browsers.

In my own scenario, I was specifically looking for solutions compatible with reactJS. Fortunately, the creator of Simplebar has provided wrappers for react, angular, vue, and even next.js. You can check out some examples here

Webkit browsers like Chrome, Safari, and Opera support the non-standard ::-webkit-scrollbar pseudo element, allowing customization of the browser's scrollbar.

Note: The ::-webkit-scrollbar is not compatible with Firefox or IE and Edge.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

Reference: How To Create a Custom Scrollbar

Create a CSS solution that works in Firefox version 64 and above

.mycoldiv{
    scrollbar-color: white rebeccapurple;
    scrollbar-width: thin;
    display: block;
    height:400px;
    overflow-x: auto;
}

For more information, visit this link

If you’re working with SASS, here’s a mixin that provides basic functionality for customizing the scrollbar's thumb, track color, and width. Keep in mind that this code has not been extensively tested, so feel free to point out any errors.

@mixin customize-scrollbar($thumb-color, $background-color: mix($thumb-color, white, 50%), $width: 1rem) {
  // For Webkit browsers
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
  }

  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  // For Internet Explorer
  & {
    scrollbar-face-color: $thumb-color;
    scrollbar-arrow-color: $thumb-color;
    scrollbar-track-color: $background-color;
  }

  // For potential Firefox compatibility (not currently functional)
  & {
    scrollbar-color: $thumb-color $background-color;
    scrollbar-width: $width;
  }
}

// Additional mixin for Firefox customization
@mixin customize-firefox-scrollbar($thumb-color, $background-color: mix($thumb-color, white, 50%), $firefox-width: this) {
  // Apply this on html/:root element for effect
  & {
    scrollbar-color: $thumb-color $background-color;
    scrollbar-width: $firefox-width;
  }
}

In my opinion, the best way to style scrollbars is by using ::-wekbit-scrollbar for all of them. Here is an example of how you can do it:

<style>
.mydiv {
height:100px;
overflow:auto;
}
     /* width */
    .mydiv::-webkit-scrollbar {
      width: 20px;
    }
    
    /* Track */
    .mydiv::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey; 
      border-radius: 10px;
    }
     
    /* Handle */
    .mydiv::-webkit-scrollbar-thumb {
      background: red;
      border-radius: 10px;
    }
    
    /* Handle on hover */
    .mydiv::-webkit-scrollbar-thumb:hover {
      background: #b30000; 
    }
</style>
<body>
<div class="mydiv"> <br/> [Content goes here] <br/> </div>
</body>