jScrollPaneでtabが空白になります

質問

jScrollPaneでtabの中身が空白になってしまいます。
○jqueryを用いたtab構造
○中身の領域が超えたらjScrollPaneのスクロールバーが現れる
としたいのですが、中身が空白になります。
回避方法をご教授下さい。

WIN IE8およびMAC Safari4で動作確認しながら制作しています。

=== ステップ１ ===
こちらのデモサイトを参考に、制作を進めたところ、
http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html

タブ切り替え時にフェードアウト、フェードインさせるために、
{fx: { opacity: 'toggle', duration: 'slow' } }
を追加したところ、
なぜかフェードアウト・フェードインが繰り返されて、点滅してしまいました。

また、各タブについて記入量が多くなると、
ページ下方にどんどん空白のスペースが生まれてしまい、見苦しくなってしまいました。

=== ステップ２ ===
そこで、jScrollPaneはそのままに、
tabのjqueryだけこちらのサイトのものを変更しました。
http://www.pharos-ei.com/mike/jquery/examples/ui.tabs.html

（htmlの記述はこちらのサイトを参考にしました。
http://5am.jp/jquery/jquery_ui_tabs/）

tab単体で動かすと、
ページ下部に空白が出来ず綺麗にフェードするようになったのですが、
jScrollPaneを同期させると、
タブの中身が完全に空白になってしまいます。
（jScrollPane単体ではちゃんと表示されます）

なぜか、タブのタイトルを「新しいウィンドウで開く」と、
そのタブの中身だけは表示されてカスタマイズされたスクロールが現れます。

<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs(
{fx: { opacity: 'toggle', duration: 'slow' } });
$('.scrollpane').jScrollPane();
});
</script>

という記述をしておりますが、
もしかしたら予め要素を読み込まないといけないのかな・・・と、

$(function(){　　の部分を

jQuery.event.add(window,"load",function(){
にしたみたのですが、変化無しでした。

ステップ２の方でかなり制作をすすめてしまったので、
こちらのjqueryで問題を解決したいのですが・・・

どうぞヒントになりそうなポイントを挙げて下さいますよう、お願い致します。

回答No.1

fujillin · ベストアンサー

＞どうぞヒントになりそうなポイントを
とのことなので、何も調べずにまったくのヤマカン的な想像ですが…

jScrollPaneはスクロールバーを自前で表示・制御する関係からＤＯＭを書換えていると想像されます。
その時に制御している要素と、tab表示で操作している要素とで同じものがあると予定通りに動作しなくなる可能性がありそうな気がします。

＞タブの中身が完全に空白になってしまいます。
とのことなので、非表示にすべき要素が表示状態になっているとか、表示要素の内容だけ（表示すべきなのに）非表示にされているなどが起きているのではないでしょうか？
furebugなどで最終形のＤＯＭの状態や制御の変化を調べてみれば何が悪さをしているかわかるのではと思います。

あるいは対処療法的に探すのなら、まずは関係しそうもないところにそれぞれを設定して動作するかテストしてみるとか。
それから、目的の表示形に近づけていくといった方法もありかも（少々遠回りですが）。
例として、tabそのものをjScrollPaneの対象とするのではなく、tab内のごく一部（両者が関係を持たなそうな）に対してスクロールを設定して、動作するかどうか確認してみてはいかがでしょうか。
それでダメな場合は、タブ外の要素にスクロールを設定してみるとか。（それぞれが独立するように）
これでもダメな場合は、スクリプト自体が干渉している可能性もありそう。

お礼

ご回答有難うございます！お礼が遅くなり申し訳ありません。

・まずは関係しそうもないところにそれぞれを設定して動作
・tab内のごく一部に対してスクロールを設定して、動作確認

この辺りは回り道もいい勉強になると思い、試しておりました。
必要最低限の部分で構成して、
どの段階でダメになるのか調べましたが、
１つのページ内でtab と scrollを使った瞬間にアウトでした。

ですから回答者さまの情報から推測するに、
ＤＯＭのエラーも考えられますが、
どうやらスクリプト自体が干渉しているのでしょう・・・

やはり凝ったデザインを目指すには、自作のスクリプトでないと・・・
とハードルの高さを見せ付けられた思いです。

どうもありがとうございました！