![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
checkboxにチェックを入れると...
-
jqueryで要素の中身を要素の外...
-
dblclickでdiv要素を一回だけ作...
-
IFRAMEの表示/非表示を切り替え...
-
removeAttribute()メソッドで削...
-
ダブルクォーテーションが消え...
-
【HP作成】クリックすると下...
-
背景色を透明化
-
取得した要素がインライン要素...
-
【javascript】document.getEle...
-
javascriptがChromeで機能しません
-
Gif画像のアニメーションが再生...
-
js ぽっぷあっぷ?
-
iframe内のリンクが飛ばないの...
-
ラジオボタンの切替で表示する...
-
jTweetsAnywhereでハッシュタグ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
クリックで色変更後に既に変更...
-
複数のリンク画像を一定時間で...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
-
HTML id名とjavascript変数名
おすすめ情報