今日の人気記事

  1. Web上でプレゼンテーションを「LocalScroll」 - jQueryプラグイン
  2. 指定した要素の高さや横幅にアニメ効果を「CSS Animate Auto」

カラー・位置・サイズを調節できるスクロールバーを追加「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>
スポンサーリンク

関連記事(一部広告含む)