jquery.jscrollpane.min.js:スクロールバーをカスタムするjs
- 2019.04.14
- JavaScript jQuery
- カスタム, スクロールバー

デザイナーさんからスクロールバーをデフォルトのものでは無く、ちょっとデザインされたモノがあがってきた時に使用しました。
1.ヘッダーの記述
<script type="text/javascript" src="js/jquery-1.6.2.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script> <link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all">
2.JavaScriptの記述
<script type="text/javascript"> $(function(){ $('.scroll-pane').jScrollPane(); //class名を指定 }); </script>
3.css記述
(以下のcssは調整してみて下さい)
#idContents01{ width:500px; height:400px; margin:0 auto; padding-top:15px; } #idContents01 .clTxt01{ padding:20px; font-size:12px; line-height:1.2em; } .scroll-pane{ width: 100%; height: 400px; overflow: auto; font-size:12px; }
4.HTMLの記述
<div class="scroll-pane"> ~ココに長文のテキストを記述します~ </div>
5.補足
ヘッダーで指定した「jquery.jscrollpane.css」ファイル内の「.~Bar」の色やサイズや背景に画像を使用したりすると、色々とスクロールバーをカスタムできます。
ソース元:jScrollPane
ちょっとスクロールバーまでデザインされると面倒だったりしますが、何だかんだ言いながらやってしまいます…
-
前の記事
getJSONでjson形式の配列情報を取得表示する方法 2019.04.12
-
次の記事
マウスオーバー・アウトで画像サイズを伸縮表示して見る 2019.04.14