jQueryプラグイン「jscrollpane.js」がchromeでうまく動かない。

jQueryのプラグインで、divのスクロールバーのデザインを変更できるjscrollpane.js、基本的に簡単端で便利なんですが、うまく動かない現象が発生しました。


【Google Chromeで確認された現象 】
jscrollpaneを組み込んだページを表示したときはスクロールバーがきちんと表示されるのに、リロード（更新）するとスクロールバーが出なくなる。


Chromeの他にもwebkit系のブラウザでは発生するようです。
スクロールバーが出なくなってしまうので、コンテンツが途中で切れてしまい、みられなくなります。
発生条件はやや不安定、というか起こるときと起こらないときがあるようで最初混乱しましたが、リロードすると発生するというのはほぼ確実なようです。


【原因】
スクロールさせようと思ったdivの中身がimgのみで、高さを指定していなかったことが原因でした。
jscrollpaneを「$(function(){});」の中で実行しようとしていたのですが、この「$(function(){});」を使うとChromeでは画像の高さを取得できない（ゼロになる）ようなのですね。

 「$(function(){});」 はDOMの構築が終わったときに実行されると言うことで、IEやOperaでは高さを明示していないimgの高さも取得できるのですが、Chromeではダメなようです。（バグじゃ無い？これ）


【対処法】
imgの高さを明示的に指定する方法もあると思いますが、後で変更になったときに面倒かもしれません。
なので、JavaScript側で対処しました。
具体的には実行のタイミングを変えます。

つまり、 「$(function(){});」で呼び出すのではなく、window.onloadのタイミングで呼び出すようにします。

ただまぁ、状況によってwindow.onloadが使えるかどうか分からないので、jQueryからonloadにセットする方法をとりました。
こんな感じです。

$.event.add(window,"load",function(){
  $('.scroll-pane').jScrollPane();
});

※2行目は状況によって変える。

いろいろめんどくさいですねぇ。