滚动条样式修改兼容各个浏览器

Posted 2020-11-22 星宝攸宁

参考网站：https://nicescroll.areaaperta.com/demo/

参考案例：https://github.com/inuyaksa/jquery.nicescroll

修改之后样式：

 

所做步骤：

<div id="boxscroll4">

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

</div>

 

写入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

<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>