jScrollPaneと動的コンテンツについて

word-cloud-432032_1280ハイ! リサです。

jScrollPaneを使ってインフォメーションのスクロールブロックを作ったのですが、そのブロックが外部のブログの一覧だったためにスクロールバーが付かないという現象が発生しました。

スポンサーリンク
スポンサーリンク

現象の推測

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

よって、動的コンテンツが完全に成形できた時点で、jScrollPaneを初期設定できれば問題がなくなるはずです。
推測は出来たのですが、どのように処理すればいいのか分からず、かなり苦労しましたので、コードを記載しておきます。

サンプルコード

var feedurl1 = "http://dummy/rss.xml";
var feed1 = new google.feeds.Feed(feedurl1);
feed1.setNumEntries(10);
feed1.load(function (result){
if (!result.error){
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var title = '


<h3>' + entry.title + '</h3>


';
//var conte = '

' + entry.contentSnippet + '

';
var Dates = new Date(entry.publishedDate);
var Dday = Dates.getDate();
if (Dday < 10) {
Dday = '0' + Dday;
}
var Dmonth = Dates.getMonth() + 1;
if (Dmonth < 10) {
Dmonth = '0' + Dmonth;
}
var Dyear = Dates.getFullYear();
var Ddates = '<span class="ymd">' + Dyear +'.'+ Dmonth +'.'+ Dday + '</span>';
$('#feed1').append('


<li class="post"><a href="' + entry.link + '">


<div class="link">' + Ddates + title + '</div>


</a></li>


');

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

初期設定のコード

以下の部分がjScrollPaneの設定コード。
上記のサンプルでは1データ毎に初期化していますが、この部分がベストかどうかは分かりません。
しかし、ここに入れないと機能しませんでした。

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

(クライアント:R社)

See you !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする