JavaScript 可変スクロールバーについて

質問

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
こちらに掲載されているスクロールバーを引用してサイトを作っていますが、
このまま使おうとすると、
<div class="content"></div>内の内容がheight以上であれば、指定位置にスクロールバーが出てきますが、
私が行いたいことは、

<div class="content" id="id1">
ここにコンテンツを書き込む
</div>
<div class="content" id="id2">
<a name="abc">abc</a>
<div id="123">
something_123
</div>
<a name="def">def</a>
<div id="456">
something_456
</div>
</div>

id1およびid2はボタンによって表示が切り替わるようにしてあり、
id2内のclassは<a>タブによって表示、非表示が可能です。

この時に、初期状態ではid1を表示させるとしたとき、
id1の内容がheightに指定した高さより小さく、
id2の内容を全て展開させるとheightの値を上回るとすると、

id2を展開させても、スクロールバーが表示されないことで困っています。

どのようにJavascriptのコードを書き換えれば、可変するDivに対応するようになるでしょうか？

回答No.3

fujillin

#1、#2です。

多少時間ができたので、DLして試してみました。

簡単な（一個の）可変長のボックスを作り、スクロールバーを表示。
スクリプトで内容を表示/非表示するだけでは、ご質問の通りスクロールバーの表示は追従しません。
サイトの説明通り、再処理させることで問題なくスクロールバーも連動することが確認できました。

想像するところ、コンテンツが増減するのに自動で追随しようとするなら、常時内容を監視していなければなりませんが、いつ増減するのかわからないもののためにそれだけの負荷をかけるのは馬鹿々々しいので、増減したときに同時に処理をするのが合理的という判断なのでしょう。
それなので、サイト内の説明にもちゃんとそのことが書いてあるのだと思います。

なお、リサイズすれことでもバーの表示/非表示が追随するようなので、増減したときにリサイズイベントを発火させるというのでもよいのでしょうけれど、（↑）の処理の方が（どうせ最初に実行するのですから）はるかに簡単ですね。

回答No.2

fujillin

#1です。

ご質問文では
＞id2を展開させても、スクロールバーが表示されないことで困っています
となっていたので、#1で引用した部分を提示させていただきました。

一方、補足でのコメントは
＞スクロールバーを表示させたくない)の時にもスクロールバーが表示されてしまうのです。
なので、逆ですね。

でも、どちらも同じように、Dynamically loaded contentのところに示されている例の通りに再処理させることでクリアできませんか？

回答No.1

fujillin

配布元のサイトの説明にこんなのがあるけれど、そのまんま回答では？
（英語はわかんないので、違ってたら失礼）

--------- ここから ---------
Dynamically loaded content

To load new content dynamically inside scroller(s) (via .load(), ajax requests etc.), you need to call (or re-call) mCustomScrollbar function after new content is loaded. For example:
-------- ここまで ----------

配布元サイトは
　http://manos.malihu.gr/jquery-custom-content-scroller

補足

ご回答いただきありがとうございます。

上記のDynamically loaded contentを参照いたしました。
しかしながら、解決にいたりませんでした。

Dynamically loaded contentの下にある、

＜！ーーーー
Hiding content scrollers

If you want to have the scroller initially hidden, you need to hide it after calling the mCustomScrollbar function. This is important, in order for the script to calculate content width or height correctly.
ーーー！＞

こちらの方が私がやりたい事に近いのですが、
前出でいうid2を読み込んだ際に、スクロールバーが表示されませんでした。

隠す前にスクリプトの記述をせよとのことですが、そうしてしまうと、
id1＋id2の合計されたheightが初期状態になってしまうため、
id1(スクロールバーを表示させたくない)の時にもスクロールバーが表示されてしまうのです。
これを回避するためには、どうしたらよいのかを悩んでいます。