質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

11439閲覧

JavaScript:IEでscrollTopが効かない

S-y

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2017/06/20 09:33

スクロールのあるモーダルを表示した際に最上部(top :0;)から表示してほしいのですが、表示してくれません。
①モーダルを表示した際に中途半端な位置までスクロールし、モーダルを閉じる
②再度、モーダルを表示すると閉じたときのままのスクロール位置で表示される

HTML

1<div class="modal fade" id="confirm-modal"> 2 <div class="modal-dialog" role="document" style="width: 70%; max-width: initial;"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" id="btn-close-template-confirm-preview" class="close" data-dismiss="modal" aria-label="Close"> 6 <span aria-hidden="true">&times;</span> 7 </button> 8 <h6 class="modal-title mail-confirm-title"></h6> 9 </div> 10 <div class="modal-body row"> 11 <div class="col-md-12"> 12 <div class="col-md-12"> 13 <div class="table-responsive"> 14 <table class="table table-bordered"> 15 <tbody> 16 <tr> 17 <th class="table-head" style="width: 30%;">○○</th> 18 <td style="width: 70%;" class="subject-confirm"></td> 19 </tr> 20 <tr> 21 <th class="table-head">○○</th> 22 <td> 23 <div> 24 <iframe id="confirm" style="border: none; width: 100%; min-height: 250px;"></iframe> 25 </div> 26 </td> 27 </tr> 28 </tbody> 29 </table> 30 </div> 31 </div> 32 </div> 33 </div> 34 <div class="modal-footer text-xs-center"> 35 <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> 36 </div> 37 </div> 38 </div> 39</div>

JavaScript

1$('.modal').on('shown.bs.modal', function() { 2 var $iframe = $("#confirm"); 3 $iframe.scrollTop(0); 4});

上記のように記述していましたが、chromeではきちんとscrollTop(0)が動作するのですが、IE・firefoxでは動作しませんでした…。
ブラウザごとでscrollTopの挙動が異なっているということで、JavaScriptを下記のように変更しましたが動作しませんでした。

JavaScript

1$('.modal').on('shown.bs.modal', function() { 2 $('html').scrollTop(0); 3 $('body').scrollTop(0); 4});

cssでheightとwidthを指定していると、動作してくれないという記事も見かけたためHTMLの<iframe>にかけているstyleも削除してみましたがこの方法でも動作しませんでした…。

※モーダルが表示された際のiframe内にはhtml、bodyが追加されbody内に内容が表示されるという感じになっています。

どなたか詳しい方、ご教授をお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

iframe内は同じドメインですかね?であれば、

javascript

1$('.modal').on('shown.bs.modal', function() { 2 $($("#confirm").contents()[0]).scrollTop(0) 3});

でどうです?

====以下追加質問の回答です=====
ちょっと手元にIEの検証環境がないので、勘ベースにはなりますが、
せっかくコードをシェアしていただいたので、怪しい箇所にコメントをしました(question①のとこ)

あと、これも勘ですが、リファクタリングしたほうがいいのではと思う箇所も2点あります。
・refact① backgroundScrollYによって呼び出し元画面のスクロール位置をキープしているように見えるのですが、modal側でキープしてくれることが多いので不要な気がします。(フレームワークによりますが、おそらくbootstrap?)
・refact② hidden.bs.modalイベントの補足が#confirm-modalに対しては2重で走ってないですか?console.logいれてあるので確認してみるといいと思います。

javascript

1var backgroundScrollY = 0; // refact① この処理は必要ですかね? 2var modalFlg = false; // refact① この処理は必要ですかね? 3$('.preview_btn').click(function() { 4 $('iframe#confirm').contents().find('body').html(''); 5 $('.subject-confirm').text(''); 6 $('.mail-confirm-title').text(''); 7 var kind = $(this).data('type'); 8 preview($(this).data('type')); 9 modalFlg = true; 10 backgroundScrollY = $(window).scrollTop(); // refact① この処理は必要ですかね? 11}); 12$(window).on('scroll', function() { 13 if (modalFlg) { 14 $(window).scrollTop(backgroundScrollY); // refact① この処理は必要ですかね? 15 } 16}); 17// refact② おそらくですが、下記 $('.modal').on('hidden.bs.modal', function() {...}) と処理が2重で走ってないですか? 18$('#confirm-modal').on('hidden.bs.modal', function() { 19 console.log('#confirm-modal hidden.bs.modal is called') 20 console.log('backgroundScrollY => ', backgroundScrollY) 21 // question① IEでスクロールが走ってしまうのは、この箇所が怪しいです。 22 $('html, body').prop({ scrollTop: backgroundScrollY }); // refact① この処理は必要ですかね? 23 modalFlg = false; 24}); 25 26// モーダル画面表示時 27$('.modal').on('show.bs.modal', function() { 28 modalFlg = true; 29 backgroundScrollY = $(window).scrollTop(); // refact① この処理は必要ですかね? 30}); 31$('.modal').on('hidden.bs.modal', function() { 32 console.log('.modal hidden.bs.modal is called') 33 console.log('backgroundScrollY => ', backgroundScrollY) 34 // question① IEでスクロールが走ってしまうのは、この箇所が怪しいです。 35 $('html, body').prop({ scrollTop: backgroundScrollY }); // refact① この処理は必要ですかね? 36 modalFlg = false; 37});

投稿2017/06/20 11:56

編集2017/06/21 01:58
h_daido

総合スコア824

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

S-y

2017/06/21 01:19

回答ありがとうございます。希望する挙動になりました。 あと一つ質問なのですが、IEだけモーダル表示の際に現在位置を保持せずに背景が最上部に戻ってしまいます。モーダルを閉じた際にはもといた位置まで戻るのですが...。 chromeやfirefoxでは位置を保持してモーダル表示してくれているので、その動きに合わせたいのですがIEだけ動かない理由が分からず煮詰まっています…。 var backgroundScrollY = 0; var modalFlg = false; $('.preview_btn').click(function(){ $('iframe#confirm').contents().find('body').html(''); $('.subject-confirm').text(''); $('.mail-confirm-title').text(''); var kind = $(this).data('type'); preview($(this).data('type')); modalFlg = true; backgroundScrollY = $(window).scrollTop(); }); $(window).on('scroll', function() { if (modalFlg) { $(window).scrollTop(backgroundScrollY); } }); $('#confirm-modal').on('hidden.bs.modal', function(){ $('html, body').prop({scrollTop: backgroundScrollY}); modalFlg = false; }); // モーダル画面表示時 $('.modal').on('show.bs.modal', function(){ modalFlg = true; backgroundScrollY = $(window).scrollTop(); }); $('.modal').on('hidden.bs.modal', function(){ $('html, body').prop({scrollTop: backgroundScrollY}); modalFlg = false; }); 重ね重ね申し訳ありませんが、ご教授願えませんでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問