請在這裡檢視示例 ☞ mCustomScrollbar示例
1 相容性：ie8+
2 需要3個資源(js、css、mCSB_buttons.png)
3 <div><p>1212321321321</p></div>，p的内容很長，而div是固定寬高的時候，應用在div上
4 自己寫的滾動條插件 ☞ jquery-plugins/scrollbar/
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>demo</title>
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<style>
* {margin: 0; padding: 0;}
body, html {width: 100%; height: 100%; background: pink; overflow: hidden;}
.body {width: 100%; height: 100%; background: grey; position: absolute;}
.content {width: 200px; height: 300px; border: 2px solid purple;}
.item {border: 2px solid blue;}
</style>
</head>
<body>
<div class="body">
<button class="delete">點選删除一個内部的滾動條</button>
<button class="scrollTo">滾動到固定位置</button>
<div class="content">
<div class="item">
<input type="text">
<p>這是内部的滾動條</p>
<p>這是内部的滾動條</p>
</div>
<div class="item">
<input type="text">
<p>這是内部的滾動條</p>
<p>這是内部的滾動條</p>
</div>
<div class="item">
<input type="text">
<p>這是内部的滾動條</p>
<p>這是内部的滾動條</p>
</div>
<div class="item">
<input type="text">
<p>這是内部的滾動條</p>
<p>這是内部的滾動條</p>
</div>
<div class="item">
<input type="text">
<p>這是内部的滾動條</p>
<p>這是内部的滾動條</p>
</div>
<div class="item">
<input type="text">
<p>這是内部的滾動條</p>
<p>這是内部的滾動條</p>
</div>
<div class="item">
<input type="text">
<p>這是内部的滾動條</p>
<p>這是内部的滾動條</p>
</div>
</div>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
<p>這是浏覽器的滾動條</p>
</div>
</body>
<script>
;$(function() {
//參數配置介紹：http://www.wufangbo.com/mcustomscrollbar/
//一個簡單的執行個體
$(".content").mCustomScrollbar({
scrollButtons: {//上下按鈕配置
enable: true,//是否添加按鈕
//scrollType: 'pixels',//點選滾動是否有停頓效果
//scrollAmount: 50,//每次點選滾動的距離
},
autoHideScrollbar: true,
//theme:"light-thick",//以下是主題
theme:"rounded-dots",
//theme:"dark-thin",
//theme:"light-3",
//theme:"3d-thick",
//theme:"3d",
//theme:"rounded-dark",
//horizontalScroll: true,//建立水準滾動條
//scrollInertia: 0,//滾動慣性
//mouseWheel: false,//是否取消滾輪效果
//mouseWheelPixels: 100,//滾動一下移動的距離
//autoDraggerLength: false,//自動調整滾動條的長度
callbacks: {
onScrollStart: function() {
$('.body').append('滾動開始//');
},
onScroll: function() {
$('.body').append('滾動結束//');
},
onTotalScroll: function() {
$('.body').append('滾動至底部//');
},
onTotalScrollBack: function() {
$('.body').append('滾動至頂部//');
},
whileScrolling: function() {
$('.body').append('...滾動中...//');
},
},
});
//删除
$('.delete').on('click', function() {
$('.item:last').remove();
});
//滾動到固定位置
$('.scrollTo').on('click', function() {
$(".content").mCustomScrollbar('scrollTo', 300);//可以是string
});
//隐藏這是浏覽器的滾動條
$('.body').mCustomScrollbar({
scrollButtons: {//上下按鈕配置
enable: true,//是否添加按鈕
},
});
});
</script>
</html>
![jQuery插件FullCalendar日程表實作可擴充Google月曆功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)