デザインをカスタマイズできる、jQueryのプラグイン「jScrollPane」でスクロールバーを簡単に設置する際のメモです。
サンプルはこちら

設置にはjQuery本体と、jScrollPaneプラグインにマウスホイール用のプラグインをあらかじめ読み込みます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Panel</title>
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="common/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="common/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function() {
$("div.scroll-pane").jScrollPane({animateScroll:true, verticalGutter:0}).data("jsp");
});
</script>
</head>
<body>
<div id="content" class="scroll-pane">
<p>ここにテキストなどのコンテンツを記述します。</p>
</div><!-- content -->
</body>
</html>

スタイルシートは最小限のみを記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
div.jspContainer {
	position: relative;
	overflow: hidden;
}
div.jspPane {
	position: absolute;
}
div.jspVerticalBar {
	position: absolute;
	width: 10px;
	height: 100%;
	top: 0px;
	right: 0px;
	background-color: #e6e6e6;
}
div.jspVerticalBar * {
	margin: 0px;
	padding: 0px;
}
div.jspCap {
	display: none;
}
div.jspTrack {
	position: relative;
}
div.jspDrag {
	position: relative;
	left: 0px;
	top: 0px;
	cursor: pointer;
	background-color: #808080;
}
div.scroll-pane {
	width: 500px;
	height: 250px;
	overflow: auto;
}

jScrollPane