オリジナルスクロールバーを設置するjQueryライブラリ「jScrollPane」の初期設定タイミング

jScrollPaneはオリジナルなスクロールバーを作ることができるjQueryライブラリです。

参照 jScrollPane(jscrollpane.kelvinluck.com)

例えば以下のようなデザインのスクロールバーを簡単に作れます。

しかし、外部ブログのRSSを読み込むような場合は、スクロールバーが付かないという現象が発生することがあります。

スポンサーリンク

現象の推測

jScrollPaneのボックスの縦方向の長さを設定するタイミングの問題なのだと推測しました。

よって、動的コンテンツが完全に成形できた時点で、jScrollPaneを初期設定できれば問題がなくなるはずです。

推測は出来たのですが、どのように処理すればいいのか分からず、かなり苦労しましたので、コードを記載しておきます。

サンプルコード

jScrollPaneの初期設定をどのタイミングで行うかが問題です。

以下、サンプルコードです。

外部ブログのRSSを取得して、Newsのフィールド(class=scroll-pane)を成形しています。

詳しくは以下のページを参照してください。

WordPressのRSSをjsonデータで処理する
2015年12月にブログのRSSを処理するため使っていた「Google Feed API」が使用停止になりました...

上記のページと異なるのはjScrollPane初期設定箇所だけです。

<script type="text/JavaScript">

//RSS取得
$(function() {
  $.ajax({
    type: 'GET',
    url: 'getjson.php',
    dataType: 'json', 
    success: function(json) {
	  $("#info_more p").hide();
	  $('#info_more .more').css({"margin-top":"-8px"});
	  $('#newsTopics').append('<dl>');
      
      var len = json.length;
      
      //データが表示数より多い場合は先頭から表示数分処理する
      //90日前
      var kyo = new Date();
	  var ttime = kyo.getTime() - 90 * 24 * 60 * 60 * 1000;

      for(var i=0; i < len; i++){
	  	//日付変換
	  	var ts = json[i].timestamp;
	  	
	  	var d = new Date( ts * 1000 );
	  	var year  = d.getFullYear();
	  	var month = d.getMonth() + 1;
	  	var day  = d.getDate();
	  	
	  	if (month < 10) {
			month = '0' + month;
		}
		if (day < 10) {
			day = '0' + day;
		}
		var date = year + '/' + month + '/' + day;
		
		//hotアイコン表示
		var image = ""
		
		if ( ~json[i].title.indexOf('!')) {
			image = ' <img src="images/hot.png" alt="HOT" />';
		} else if ( ~json[i].title.indexOf('!')) {
			image = ' <img src="images/hot.png" alt="HOT" />';
			
		}
		//new アイコン表示
		else if ( ttime < (json[i].timestamp * 1000) ) {
			image = ' <img src="images/new.png" alt="NEW" />';
		}
		
		//dt dd 成形
		$('#newsTopics').append('<dt>'+ date + '</dt><dd><a href="' + json[i].link + '" target="_blank">' + json[i].title + '</a>' + image + '</dd>');
		
      }
      
      $('#newsTopics').append('</dl>');
     
      $('.scroll-pane').jScrollPane({ 
		reinitialiseOnImageLoad: true 
      });

    },
	error: function() {
		$('#info_more').append('※Newsブログをご覧下さい。');
		$("#info_more p").hide();
	}
  });
});

</script>

初期設定のタイミング

jScrollPaneの以下の初期設定は全てのRSSを読み込んでNewsのフィールドを成形し終わった後にしてください。

$('.scroll-pane').jScrollPane({
reinitialiseOnImageLoad: true
});

jQueryライブラリは簡単な反面、初期設定のタイミングによっては機能しないことがあります。

しばしば遭遇する問題ですので、注意が必要です。

by T.Y.

スポンサーリンク

シェアする

フォローする

スポンサーリンク