カラー・位置・サイズを調節できるスクロールバーを追加「slimScroll」
当ページのリンクには広告が含まれています。
スポンサーリンク
カラー・位置・サイズを調節できるスクロールバーを追加することのできるプラグイン「slimScroll」を紹介します。
jQueryプラグイン「slimScroll」
このプラグインを使えば、指定した要素にスクロールバーを追加することができます。
- バーの幅
- 位置
- 高さ
- カラー
- 透明度
- スクロール・イベント
- ……など。
スポンサーリンク
それではデモページをスクロールしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="slimScroll のデモでーす。">
<title>slimScroll - jQuery Plugin Demo</title>
<style>
#contents{
margin: 50px;
width: 500px;
}
</style>
</head>
<body>
<h1>slimScroll のデモでーす。</h1>
<div id="contents">
<p>スクロールしてみてください。</p>
<div id="demo">
<p>五月雨をあつめて早し最上川<br />（さみだれを あつめてはやし もがみがわ）</p>
<p>夏草や兵どもが夢の跡<br />（なつくさや つわものどもが ゆめのあと）</p>
<p>閑さや岩にしみ入る蝉の声<br />（しずかさや いわにしみいる せみのこえ）</p>
<p>古池や蛙飛びこむ水の音<br />（ふるいけや かはづとびこむ みずのおと）</p>
<p>荒海や佐渡によこたふ天河<br />（あらうみや さどによこたう あまのがわ）</p>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.slimscroll.min.js"></script>
<script>
$(function(){
$('#demo').slimScroll({
railVisible: true,
railColor: '#f00',
position: 'left',
distance: '200px'
});
});
</script>
</body>
</html>
スポンサーリンク