http://manos.malihu.gr/tuts/jquery_custom_scroll …
こちらに掲載されているスクロールバーを引用してサイトを作っていますが、
このまま使おうとすると、
<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に対応するようになるでしょうか?
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
#1、#2です。
多少時間ができたので、DLして試してみました。
簡単な(一個の)可変長のボックスを作り、スクロールバーを表示。
スクリプトで内容を表示/非表示するだけでは、ご質問の通りスクロールバーの表示は追従しません。
サイトの説明通り、再処理させることで問題なくスクロールバーも連動することが確認できました。
想像するところ、コンテンツが増減するのに自動で追随しようとするなら、常時内容を監視していなければなりませんが、いつ増減するのかわからないもののためにそれだけの負荷をかけるのは馬鹿々々しいので、増減したときに同時に処理をするのが合理的という判断なのでしょう。
それなので、サイト内の説明にもちゃんとそのことが書いてあるのだと思います。
なお、リサイズすれことでもバーの表示/非表示が追随するようなので、増減したときにリサイズイベントを発火させるというのでもよいのでしょうけれど、(↑)の処理の方が(どうせ最初に実行するのですから)はるかに簡単ですね。
No.2
- 回答日時:
#1です。
ご質問文では
>id2を展開させても、スクロールバーが表示されないことで困っています
となっていたので、#1で引用した部分を提示させていただきました。
一方、補足でのコメントは
>スクロールバーを表示させたくない)の時にもスクロールバーが表示されてしまうのです。
なので、逆ですね。
でも、どちらも同じように、Dynamically loaded contentのところに示されている例の通りに再処理させることでクリアできませんか?
No.1
- 回答日時:
配布元のサイトの説明にこんなのがあるけれど、そのまんま回答では?
(英語はわかんないので、違ってたら失礼)
--------- ここから ---------
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-scr …
この回答への補足
ご回答いただきありがとうございます。
上記の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(スクロールバーを表示させたくない)の時にもスクロールバーが表示されてしまうのです。
これを回避するためには、どうしたらよいのかを悩んでいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
classの中の<a>タグにidを追加
-
jQueryでクリックされた要素のi...
-
iframe内のリンクが飛ばないの...
-
foreach文で20件のループに、空...
-
背景色を透明化
-
document.all.id1.innerText="ok";
-
javascriptテキストBOX色を元に...
-
jQueryで同じid属性が複数あっ...
-
一部のjavascriptがfirefoxで効...
-
クリックで色変更後に既に変更...
-
jqueryを使って無駄なspanタグ...
-
Javascriptで可変のHTMLのID名...
-
getElementByIdの戻り値がnull...
-
javascriptで編集されたHTMLの...
-
onclickとonmouseoverを同時に...
-
もう一度onclickを利用した伸縮...
-
オンマウスで画像と説明文を表...
-
javascript ループ中の処理
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
背景色を透明化
-
クリックで色変更後に既に変更...
-
前回の質問の続き function mov...
-
読み込んだQRコードをフォーム...
-
IFRAMEの表示/非表示を切り替え...
-
removeAttribute()メソッドで削...
-
console.log結果をhtmlで表示し...
-
変数内容をHTML内で表示する方法
-
VideoBoxのカスタマイズ
-
[急ぎ] videoタグで埋め込んだm...
-
CSSで指定したwidthをマウスで...
-
取得した要素がインライン要素...
-
JAVAスクリプトについて
-
テキストエリア内の一部の文字...
-
jQueryで同じid属性が複数あっ...
おすすめ情報