滾動條美化插件 nicescroll
阿新 • • 發佈：2018-10-13
src idt borde 效果 new 插件 文檔 http 地方
這個插件使用起來非常簡單，首先下載插件jquery.nicescroll.min.js
然後在頁面中引入jquery，再引入這個插件，
然後在頁面中需要修改滾動條的地方，例如id為box的div
<div id="box">
在js中給這個div添加一個方法就可以了：
$("#box").niceScroll();
具體參數，可以查看插件的api文檔：
實例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid blue;
overflow-y: scroll;
}
.box div {
height: 1000px;
}
</style>
<script src="../../lib/jquery-3.2.1.min.js"></script>
<script src="../../lib/jquery.nicescroll.min.js"></script>
<script>
$(function() {
$("#box").niceScroll({
cursorcolor: "#ff0000"
});
});
</script>
</head>
<body>
<div class="box" id="box">
<div></div>
</div>
</body>
</html>
效果為：
滾動條美化插件 nicescroll