參考網站: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>