ポップアップウインドウ内での任意位置スクロール

2026/02/26 00:31

質問内容があいまいですポップアップとは具体的にどういう仕組みをさしているのでしょうか？

2026/02/26 04:17

説明があいまいですみません。本文中に、*で脚注がつけられています。短いものは同じファイル内の div 要素に記述しておいて、* がクリックされた際、位置を取得して css の visibility を visible にすることでポップアップを実現しています。注が長かったり複数箇所から参照される場合、別ファイルにしておいて、それを append で作成した新規 div 要素に読み込み、以下は同じ流れて表示します。で、その注が違う箇所から参照されるとき、直接に必要なのはポップアップした表示の中で下の方にあり、スクロールしないとたどりつけない場合があるのです。そこでその位置に id を埋め込んでおいて、ポップアップと同時にその位置までスクルールさせたい、と考えた次第です。 jquery を使っていますが、全体像を理解しているわけではなく、事実上コピペと試行錯誤でしのいでいる状況です。主ウインドウとは独立した別ウインドウで資糧を表示することもあるのですが、そのときはサブウインドウの window を w として　w.$('body').animate({scrollTop:w.$(id).offset().top-10},500); のようにして実現できました。同じようにやろうとしたのですが、主ウインドウの中のポップアップウインドウでは当然 window が主ウインドウそのものを指してしまい、div 要素内に手が届きません。ひょっとしたら、簡単に window に置き換えられるような何かがあって、上の w をそれに置き換えたらすむのかなと思った次第です。これで伝わりますでしょうか。

行動規範の内容に同意します

回答2件

参考までに

html
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  btn.addEventListener('click', ()=>{
4    modal.showModal();
5    modal.scrollTo({
6    top: target.getBoundingClientRect().top-modal.getBoundingClientRect().top,
7    behavior: "smooth"
8    });
9  });
10  modal.addEventListener('click', ()=>{
11    modal.scrollTo({
12    top: 0,
13    });
14    modal.close();
15  });
16});
17</script>
18<style>
19#modal{
20border:solid 0px;
21outline:solid 0px;
22max-height:50vh;
23padding:0;
24}
25.dummy{
26height:60vh;
27background-Color:gray;
28width:50vw;
29}
30:nth-child(odd of .dummy){
31background-Color:lightgray;
32}
33#target{
34background-Color:yellow;
35}
36</style>
37<input type="button" value="open" id="btn">
38<dialog id="modal">
39<div class="dummy">1</div>
40<div class="dummy">2</div>
41<div class="dummy">3</div>
42<div class="dummy">4</div>
43<div class="dummy" id="target">5</div>
44<div class="dummy">6</div>
45<div class="dummy">7</div>
46<div class="dummy">8</div>
47<div class="dummy">9</div>
48</dialog>

単純なscroll

modalではなく単にdivの中でスクロールさせるにはこんな感じ

html
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  btn.addEventListener('click', ()=>{
4    popup.scrollTo({
5    top: 0
6    });
7    popup.scrollTo({
8    top: target.getBoundingClientRect().top-popup.getBoundingClientRect().top,
9    behavior: "smooth"
10    });
11  });
12});
13</script>
14<style>
15#popup{
16border:solid 0px;
17outline:solid 0px;
18max-height:50vh;
19max-width:50vw;
20padding:0;
21overflow-Y:scroll;
22overflow-X:hidden;
23
24}
25.dummy{
26height:60vh;
27background-Color:gray;
28width:50vw;
29}
30:nth-child(odd of .dummy){
31background-Color:lightgray;
32}
33#target{
34background-Color:yellow;
35}
36</style>
37<input type="button" value="scroll" id="btn">
38<div id="popup">
39<div class="dummy">1</div>
40<div class="dummy">2</div>
41<div class="dummy">3</div>
42<div class="dummy">4</div>
43<div class="dummy" id="target">5</div>
44<div class="dummy">6</div>
45<div class="dummy">7</div>
46<div class="dummy">8</div>
47<div class="dummy">9</div>
48</div>

投稿2026/02/26 01:05

編集2026/02/26 10:48

総合スコア118374

2026/02/26 04:19

すみません、こちらの理解が追いつかないので、少し（数日？）時間をください。理解できてからきちんとコメントさせていただきます。

2026/02/26 04:34

一応挙動だけ確認しておいてくださいサンプルソースをhtmlで保存してブラウザで開くとボタンが表示されますのでopenを押す。ポップアップ的なもの（一般にモーダルダイアログ）が表示され、targetまでスクロールするという仕組みにしてあります。挙動が想定と違うようなら質問へ補足を追記してください

2026/02/26 04:59

ありがとうございます。ソースを読んで、ご説明のような動きをするのだなということは理解したところです。動作そのものはイメージに近いのですが、記述の仕方が慣れないものばかりで、わたしの実際に落とし込むのに何をどう変えていけばいいのかを考えているところです。ちなみに、わたしのやっていることは浄土真宗の聖典を資料化することで、聖典の本文に、脚注や同内容の他の聖典とのリンクをしていくことなどです。実際の様子を見ていただくといいのですが、原状 IE でしか動作しないため、無理矢理 IE 互換モードで使用しているので、無理はおすすめできません。一応、http://yamadera.info の、「聖典」コーナで、どれでも聖典を選んでいただけると何をやっているのかは見ていただけると思いますが。

2026/02/26 05:29

今、使ったことのない dialog のことを調べて、一つ理解が進んだ段階です。 dialog では、わたしの要求とは違うのですが、dialog をスクロールさせた部分が参考にできるかなと。原状では $(document).on('click','a.b',function(e) { popE(window,e,this.href,'q');　// 外部ファイルを読み込んでポップアップさせる関数。最後の引数はポップアップのスタイルを指定するもの。 return false; }); のように起動しています。最終的に Did で指定した div 要素 window.$(Did).css({'left':x,'top':y,'width':d,'visibility':'visible'}); でポップアップさせており、それに続いて条件判断後スクロールをさせたいのですが、div 要素に対して .scrollTo とかできるのでしょうか。

2026/02/26 10:45

一応追記しておきました。「外部ファイルを読み込んでポップアップ」についてはCORSなどの対応が必要になるかも

Element: scrollTop プロパティ - Web API | MDN

2026/02/26 12:29

ありがとうございます。外部ファイルの読み込みはほんとうに無理くりでしのいでおり、いろいろと問題はあると思いますが、動いているのでよしとしています。ちなみに CORS は知りませんので、後追いで調べておきます。なお、div 要素への .scrollTop() メソッドの付け方がわかり、位置取得も .position() を使うことで解決できました。お世話になりました。

行動規範の内容に同意します

ベストアンサー

こういうことでしょうか？

Element: scrollIntoView() メソッド - Web API | MDN

投稿2026/02/26 00:02

総合スコア37725

2026/02/26 04:21

何だかヒントがつかめそうな予感はありますが、これからたどってみますので、きちんとしたコメントにはもう少し時間をください。

2026/02/26 04:26

補足拝読。 jQueryが必須だったのですね。ではこの回答は微妙ですのでスルーしていただいて構いません。できれば、質問にその旨追記された方が、お互いにムダがなくていいと思います。

2026/02/26 04:34

いえ、何だか大雑把な話としては window を element に替えるだけで基本的には何とかなりそうな印象なのですが。ただ、課題ができてから調べて対応する素人、id が Did である div 要素の探し方からあちこち探してコピーしてこないとわからない状況です。簡単にわかるようでしたらご説明いただけると助かります。m(._.)m

2026/02/26 05:19

提示しましたリンクは jQuery オブジェクトには存在しないメソッド・プロパティですから window を element に替えるだけでは動作しないと思います。想像ですが、window.$('body') を window.$(【セレクタ】)にするといいのではないかと思います。

2026/02/26 05:46

ご指摘を適用して、ポップアップウインドウ内をスクロールさせることまではたどりつきました。まだスクロール量の読み出しがうまくいきませんが、もう少し試行錯誤を続けます。ありがとうございます。

2026/02/26 09:30

もしかすると、.position()の方が適切なのかもですね。 https://api.jquery.com/position/