Scroll bar style modification is compatible with various browsers

Reference website: https://nicescroll.areaaperta.com/demo/

References: https://github.com/inuyaksa/jquery.nicescroll

After modifying the style:

 

Do these steps:

<div id="boxscroll4">

  <div class="wrapper"></div>

</div>

 

Write css

<style type="text/css">

  #boxscroll4 {

    height: 300px;

    margin-top: 40px;

    background-color: #00FF66;

    font-family: Georgia, "Times New Roman", Times, serif;

    font-size: 18px;

    padding: 20px;

    overflow-y: scroll;

  }

  .wrapper{

    height: 600px;

    background: red;

  }

</style>

Js introduced

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="js/jquery.nicescroll.min.js"></script>

<script>

  $(document).ready(function() {

    $("#boxscroll4").niceScroll("#boxscroll4 .wrapper",{cursorborder:"",cursorcolor:"green",boxzoom:true});  // hw acceleration enabled when using wrapper

  });

</script>