- ベストアンサー
スムーズにスクロールできない問題の原因と解決方法
- スプリクトがdiv内で作動しない原因を調査しましたが、わかりませんでした。
- スプリクトがdiv内で動作しない問題について教えてください。
- スタイルシートを使ったボックス内でスクロールするスプリクトが正常に動作しません。
- hujisan0383672
- お礼率40% (2/5)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#2です。 ＞しかし、問題は、<BODY>間に<DIV>があると、スクリプトがまったく反応しないのです。 そんなことはないでしょう。 No4の補足のソースで確認しても、表示画面は『ドキュメント』のトップに戻ってますよ。 （ただし、div内にもスクロールバーがある場合、そちらは操作していないので変わりません。） というか、ご提示のHTMLとCSSだとfxやOperaではdivにはスクロールバーは表示されませんが、たまたまIE(6)でdivにスクロールバーが表示されたというだけですが。
その他の回答 (4)
- yyr446
- ベストアンサー率65% (870/1330)
意味が解りました！ #sub{ position:absolute; bottom: 0px; right: 0px; z-index:100; } で、固定で {bottom:0px;}してるから、スクロール状態の応じて、#subの縦方向位置を変化させてやらないと、動作していても効果が現われないっすよ。
お礼
この度は回答ありがとうございました。 いろいろやってみましたが、さっぱり原因が分からず…もう一度一から勉強しなおそうと思います。 何度も回答いただきありがとうござました。
補足
回答ありがとうございます！ 「Another Html-lint」←このようなサイトもあるんですね。とても勉強になります！ しかし、問題の件ですが、 subのボックスは画面の右下に常に固定しておきたいので、{bottom:0px;}と{right: 0px;}がなければいけないと思うのですが… 最初の質問で、mainボックス内を「・・・略」としかしなかったのがいけませんね。私の質問ミスです。申し訳ございませんでした。 ↓いらなかった部分を削除しました。↓ <script type="text/javascript" src="scroll.js" charset="utf-8"></script> <STYLE type="text/css"> <!-- body{ height:100%; margin:0px auto; } #sub{ width:100px; background-color:ffffcc; position:absolute; bottom: 0px; right: 0px; z-index:100; } div#main{ width:100%; height:100%; overflow:auto; } --> </STYLE> </HEAD> <BODY> <DIV id="sub"><a href="#top">上へ</A></DIV> <DIV id="main"> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR></DIV> </BODY> このsubの中の「上へ」リンクでページの上に戻ってくれれば問題ないのですが、反応しません。 ただし、subボックスを使わないようにして<DIV id="sub">～</DIV>と<DIV id="main">～</DIV>を削除し、<BODY>～</BODY>間にページが長くなるようにして普通に<a href="#top">上へ</A>した場合は、正常に反応します。 subボックス内のリンクでも正常に反応させるにはどうしたらよいのでしょうか？ スクリプトの内容に問題があるのでしょうか？ 何度何度も申し訳ございません。どうか宜しくお願いいたします。
- yyr446
- ベストアンサー率65% (870/1330)
＞「div内では作動しない」 の意味がどうしても解りませんね。作動するはずですけど．．． HTMLマークアップの根本的な間違いしてませんか！ ＜Ａ＞とか Another Html-lintでチェックしてみましょう。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
- fujillin
- ベストアンサー率61% (1594/2576)
ざっと見ただけですが… ＞普通のbody内でリンクを指定すると、問題なくスプリクトが作動します。 <a name="top">とか<a id="top">が途中にあっても問題なく作動しますか？（そうは見えない） ご提示のスクリプトは、リンク先に「#top」が入っていると、無条件にドキュメントの一番上にスクロールするスクリプトのように見えます。 ご希望通りにならないのは、（↑）のような処理をするスクリプトだからということではないでしょうか？ なので、#toppingとかでも反応してしまうのではないかと… あるいは、別ページの指定で、<a href="別ページ.html#toParadise">とかがあっても、一番上にスクロールしてしまいませんか？
補足
回答ありがとうございます。 ＞ご提示のスクリプトは、リンク先に「#top」が入っていると、無条件にドキュメントの一番上にスクロールするスクリプトのように見えます。 はい。そういうスクリプトにしたのですが、必ず<a name="top">でラベルを付けなければいけないと思っていました。なくても大丈夫なんですね、ありがとうございます。 ページの途中で、<a name="top">を付けても、無視され一番上に戻りました。<a name="top">がなくてもページの一番上に戻りました。 しかし、問題は、<BODY>間に<DIV>があると、スクリプトがまったく反応しないのです。 スクリプトの内容に<div>間で反応するような指示をいれなければいけないのでしょうか？ 大変申し訳ございませんが、どうか宜しくお願いいたします。
- yyr446
- ベストアンサー率65% (870/1330)
○○.js だけじゃ、神様でもない限り回答できない。
補足
申し訳ございませんでした。 <script type="text/javascript" src="scroll.js" charset="utf-8"></script> jsファイルの中は下記のとうりです。 function setGoTop() { var aTagList = document.getElementsByTagName('a'); for (var i = 0; i < aTagList.length; i++) { if (aTagList[i].href.match(/#top/i)) { aTagList[i].onclick = goPageTop; } } } var goTopMove = 20; var goTopPosi; function goPageTop() { var yPos = document.body.scrollTop || document.documentElement.scrollTop; mObj(yPos); return false; } function mObj(y, s) { if (s) goTopMove = s; goTopPosi = parseInt(y - y * 2 / goTopMove); scrollTo(0, goTopPosi); if (goTopPosi > 0) setTimeout('mObj(goTopPosi, goTopMove)', 1); } if (window.addEventListener) window.addEventListener('load', setGoTop, false); if (window.attachEvent) window.attachEvent('onload', setGoTop); 何卒宜しくお願いいたします。
お礼
回答ありがとうございます。 いろいろとやってみましたが、いまだ原因がわかりません。 もう一度、HTMLやCSSを勉強しなおそうと思います。 いろいろと教えていただきありがとうございました。