カラー・位置・サイズを調節できるスクロールバーを追加「slimScroll」

当ページのリンクには広告が含まれています。

jQuery Plugin » スクロール » カラー・位置・サイズを調節できるスクロールバーを追加「slimScroll」

カラー・位置・サイズを調節できるスクロールバーを追加することのできるプラグイン「slimScroll」を紹介します。

jQueryプラグイン「slimScroll」

このプラグインを使えば、指定した要素にスクロールバーを追加することができます。

バーの幅
位置
高さ
カラー
透明度
スクロール・イベント
……など。

それではデモページをスクロールしてみてください。

「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>

GitHub

jQueryプラグイン「slimScroll」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）