WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

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()を呼んでるだけです。
おわり。

 - jQuery

  • このエントリーをはてなブックマークに追加

  関連記事

thum_jquery
flexsliderのmanualControlsを使ってサムネイルと連動させる

便利で有名なjqueryのスライダープラグインflexsliderですが、man …

thum_jquery
ページ内リンクをスムーズスクロール

サイト内を滑らかにスクロールさせます。 ほぼ必ずサイトの右下などに「Topへ戻る …

thum_jquery
flexslider2のカルーセルをレスポンシブ対応する

カルーセルスライダーをレスポンシブ対応しました。有名なflexsliderで実装 …

thum_jquery
スクロールバーをかっこよくデザインする

新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だと …

thum_jquery
スクロールしたときに画像を読み込むことでページの表示を高速化させる

スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通 …