jScrollPaneをレスポンシブ対応する
2015/05/27
スクロースバーを使うときはいつも「jScrollPane」を使ってます。使い方は簡単で上記リンクに示したとおり。
でもこのままではレスポンシブ対応してません。対応方法をメモ。
$(window).resizeを使うだけ
簡単です。
通常の下記の記載を.resizeを使って書き直すだけ。
<script type="text/javascript">
$(function() {
$('.scroll_area').jScrollPane();
});
</script>
これを、
<script type="text/javascript">
$(function() {
$(window).resize(function() {
$('.scroll_area1').jScrollPane();
});
});
</script>
こうするだけ。
要はウィンドウがリサイズされるたびにjScrollPane()を呼んでるだけです。
おわり。
関連記事
-
-
スクロールしたときに画像を読み込むことでページの表示を高速化させる
スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通 …
-
-
スクロールバーをかっこよくデザインする
新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だと …
-
-
ページ内リンクをスムーズスクロール
サイト内を滑らかにスクロールさせます。 ほぼ必ずサイトの右下などに「Topへ戻る …
-
-
flexslider2のカルーセルをレスポンシブ対応する
カルーセルスライダーをレスポンシブ対応しました。有名なflexsliderで実装 …
-
-
flexsliderのmanualControlsを使ってサムネイルと連動させる
便利で有名なjqueryのスライダープラグインflexsliderですが、man …