滾動插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
<style>
.wrap{
width: 220px;
height: 300px;
background: red;
overflow: auto;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>我們</li>
<li>滾動條</li>
<li>偶不了</li>
<li>瀑布流</li>
<li>插件</li>
<li>日歷插件</li>
<li>時間插件</li>
<li>日期</li>
<li>編譯器</li>
<li>雙月日歷插件</li>
<li>日歷插件</li>
<li>時間插件</li>
<li>日期</li>
<li>編譯器</li>
<li>雙月日歷插件</li>
<li>日歷插件</li>
<li>時間插件</li>
<li>日期</li>
<li>編譯器</li>
<li>雙月日歷插件</li>
</ul>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.min.js"></script>
<script sr="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.mCustomScrollbar.js"></script>
<script>
$(".wrap").mCustomScrollbar({
autoHideScrollbar:true,
theme:"minimal-dark",
autoDraggerLength:true,
scrollButtons:{
enable:false,
scrollType:"continuous",
scrollSpeed:10,
//scrollAmount:10,
scrollAmount : 40
},
advanced : {
updateOnBrowserResize : true,
updateOnContentResize : true,
autoExpandHorizontalScroll : false
//autoScrollOnFocus : true
}
})
</script>
</body>
</html>
滾動插件