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

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

参照 jScrollPane(jscrollpane.kelvinluck.com)

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

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

スポンサーリンク

現象の推測

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

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

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

サンプルコード

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

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

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

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

2015年12月にブログのRSSを処理するため使っていた「Google Feed API」が使用停止になりました。 このAPIはク...

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

初期設定のタイミング

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

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

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

by T.Y.

スポンサーリンク

シェアする

フォローする