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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

726閲覧

iOSで背景固定するには

fu_ji

総合スコア44

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/01/29 09:51

編集2022/01/12 10:55

以前に下記の質問をした者です。
Drawer.jsで背景の固定をしたい

上記質問を要約すると、drawer.jsで実装しているドロワーナビが開いたときに
背景のコンテンツをスクロールさせないようにしたく、
ドロワーが開いたときにEventListenerのpassiveをfalseに指定してスクロールをさせないようにして
ドロワーが閉じたときにEventListenerを解除する事で解決しました。

ですが上記は背景のみ固定ではなく、ページ全体のスクロール固定となっています。
ナビ内の情報が増えてきたことで、やはり背景を固定・ナビはスクロールにしたくなりました。
一応解決はしましたが、問題点もあり最善ではないと思いますので
よりよい方法をご教示いただけますと幸いです。

解決策

iPhoneでも背景のスクロールを固定したモーダル(ドロワー)
上記サイトを参考に下記の記述を行いました。

jQuery

1var qux,quux,quuux; 2$(window).on('load scroll',function(){ 3 quux = $(this).scrollTop(); 4}); 5 6 $(document).ready(function() { 7// ドロワーナビが開いたとき 8 $('.drawer').drawer(); 9 $('.drawer').on('drawer.opened', function(){ 10// スクロール停止の処理 11 $('html,body').css('position','fixed'); 12 quuux = quux; 13 $('html,body').css('top','-'+quux+'px'); 14 }); 15 16// ドロワーナビが閉じたとき 17 $('.drawer').on('drawer.closed', function(){ 18// スクロール停止することを停止する処理 19 $('html,body').css('position',''); 20 $('html,body').css('top',''); 21 $(window).scrollTop(quuux); 22 }); 23 });

一応、再現できるHTMLも記載します。(drawer.jsのデモです)

html

1<html> 2<head> 3<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> 4 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 6<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> 7<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> 8<script> 9$(document).ready(function() { 10 $('.drawer').drawer(); 11}); 12</script> 13</head> 14<body class="drawer drawer--right"> 15 <header role="banner"> 16 <button type="button" class="drawer-toggle drawer-hamburger"> 17 <span class="sr-only">toggle navigation</span> 18 <span class="drawer-hamburger-icon"></span> 19 </button> 20 <nav class="drawer-nav" role="navigation"> 21 <ul class="drawer-menu"> 22 <li><a class="drawer-brand" href="#">Brand</a></li> 23 <li><a class="drawer-menu-item" href="#">Nav</a></li> 24 <li><a class="drawer-menu-item" href="#">Nav</a></li> 25 <li><a class="drawer-menu-item" href="#">Nav</a></li> 26 <li><a class="drawer-menu-item" href="#">Nav</a></li> 27 <li><a class="drawer-menu-item" href="#">Nav</a></li> 28 <li><a class="drawer-menu-item" href="#">Nav</a></li> 29 <li><a class="drawer-menu-item" href="#">Nav</a></li> 30 <li><a class="drawer-menu-item" href="#">Nav</a></li> 31 <li><a class="drawer-menu-item" href="#">Nav</a></li> 32 <li><a class="drawer-menu-item" href="#">Nav</a></li> 33 <li><a class="drawer-menu-item" href="#">Nav</a></li> 34 <li><a class="drawer-menu-item" href="#">Nav</a></li> 35 <li><a class="drawer-menu-item" href="#">Nav</a></li> 36 <li><a class="drawer-menu-item" href="#">Nav</a></li> 37 <li><a class="drawer-menu-item" href="#">Nav</a></li> 38 </ul> 39 </nav> 40 </header> 41 <main role="main"> 42 <p>AAAAAAAAAAAAAA</p> 43 <p>BBBBBBBBBBBBBB</p> 44 <p>AAAAAAAAAAAAAA</p> 45 <p>BBBBBBBBBBBBBB</p> 46 <p>AAAAAAAAAAAAAA</p> 47 <p>BBBBBBBBBBBBBB</p> 48 <p>AAAAAAAAAAAAAA</p> 49 <p>BBBBBBBBBBBBBB</p> 50 <p>AAAAAAAAAAAAAA</p> 51 <p>BBBBBBBBBBBBBB</p> 52 <p>AAAAAAAAAAAAAA</p> 53 <p>BBBBBBBBBBBBBB</p> 54 <p>AAAAAAAAAAAAAA</p> 55 <p>BBBBBBBBBBBBBB</p> 56 <p>AAAAAAAAAAAAAA</p> 57 <p>BBBBBBBBBBBBBB</p> 58 <p>AAAAAAAAAAAAAA</p> 59 <p>BBBBBBBBBBBBBB</p> 60 <p>AAAAAAAAAAAAAA</p> 61 <p>BBBBBBBBBBBBBB</p> 62 </main> 63</body> 64</html>

問題点

iOS(iPhone6)でしか動作確認ができていませんが、
ナビを開いた直後にナビが閉じてしまう場合があります。
WEBブラウザ自体のメニューバーは
上方向にスクロール時のみ表示・下にスクロール時は非表示となりますが、
ブラウザメニューが非表示の時にドロワーナビを開くと
ブラウザメニューが開かれてしまい、ドロワーナビが閉じてしまいます。

恐らく、 $('html,body').css('top','-'+quux+'px'); の記述で
(動きとしては見えないが)上にスクロールされており
ブラウザのメニューが表示され、windowの高さが再取得されてしまう事で
ドロワーナビが消えてしまうのかと想像しています。
ちなみに、何故かEdgeとsleipnirではブラウザメニューが表示されても消えません。
解決策や、他の手段がありましたらご教示いただけますと幸いです。
長くなってしまいましたが、どうぞよろしくお願いいたします。

他、参考サイト

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー
今回の実装と近いのですが、こちらはドロワーを開くとコンテンツが一番上までスクロールしてしまう上にドロワーが閉じてしまいました。
ドロワーが閉じる理由は今回の実装と同じだと思います。

iOS でページ全体はスクロールを無効にし、個別の要素(textarea など)では有効にする方法
1行目のtextareaを固定したいnavに変更してみましたが、動作せず、知識不足からどう触ればいいかもわかりませんでした。

JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ
モーダル時の記事の為、ドロワーメニューへの応用の仕方がわかりませんでした。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/01/30 00:22

ドロップダウンメニューの中身が多すぎなのはレイアウト的にいけてない
fu_ji

2019/01/30 00:28

yoshi0819 様 失礼しました、確認用のアラートの記述を消し忘れていました。 アラートを削除すれば現状同じ状況となっております。 質問文の記述も修正いたしました。 ご確認よろしくお願いします。
fu_ji

2019/01/30 00:42

asahina1979 様 たしかにそうなんですが、実際はアコーディオンメニューと併用して最大時にややウィンドウサイズをはみ出る程度なので許容かと思っています。 要件もありますので今回はレイアウトの変更は視野にいれておりませんが、 2階層目のページ数が多い場合のスマホのナビについていい例がありましたらアドバイスいただけますと助かります。
urbainleverrier

2019/02/15 17:20

$('html,body').css('position','fixed')が行われると閉じるようです。
urbainleverrier

2019/02/15 17:25

回答になりませんが、drawer.jsは2年前に開発が終了しているようです。 敷居は高いですが、ご自身でjavascriptを用いて実装された方が早いかもしれません。
fu_ji

2019/02/21 04:03

tktkt 様 $('html,body').css('position','fixed')は以前の質問時にも試していたのですが、 最上部までスクロールしてしまう挙動があるのでこのままでは使えなかったのです。 かといってその解決方法もわからず、別の方法を探していた所でした。 drawer.jsが終了している事把握しておりませんでした。 他の手段を試してみるか、自力での構築も視野に入れてみます。ありがとうございました。
guest

回答1

0

そのライブラリは使用したことないですが、よく背景を一枚板にして固定して、上のコンテンツだけを動かすときにはこのようにしますけどね。

CSS

1/*固定する背景のエリア*/ 2.box_background{ 3 position: fixed; 4  top: 0px; 5 left: 0px; 6  width: 100%; 7 height: 100%; 8 z-index: 0; 9} 10/*スクロールされるエリア*/ 11.box_wrapper{ 12 position: relative; 13 top: 0px; 14 left: 0px; 15 width: 100%; 16 height: 100%; 17 z-index: 1; 18}

要はz-indexプロパティを使って、要素を上下構造にして、.box_backgroundには背景だけを配置し、
.box_wrapperにはtopとleftを同じにして、コンテンツを配置していくわけです。

body要素に直接クラスを設けるやり方ではなく、従来のwebページのように背景用の要素と
コンテンツ用のラッパー要素を作って上のhtmlに当てはめていきます。

上だとbody要素に.drawerを使っていますが、ラッパー要素の方に.drawerを
使うようにしてください。

投稿2019/02/18 02:10

編集2019/02/26 02:29
FKM

総合スコア3608

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

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

fu_ji

2019/02/26 02:19

ご回答ありがとうございます。また、確認遅くなり申し訳ございません。 不勉強で申し訳ないのですが、理解ができない部分があります。 こちらのCSSのみで固定されるのですか? ご教示いただいたCSSのみでは、上下構造で配置しているだけ、と理解しています。 absoluteでは背景も固定せず一緒にスクロールしませんか? >body要素に直接クラスを設けるやり方ではなく、従来のwebページのように背景用の要素と >コンテンツ用のラッパー要素を作って上のhtmlに当てはめていきます。 ここも少しわかりませんでした。下の二通りに正解はありますか? (スクロールされるエリアはnavのみとします) ① <body class="box_background"> <nav class="box_wrapper drawer"></nav> <header></header> <main></main> </body> ② <body> <nav class="box_wrapper drawer"></nav> <header class="box_background"></header> <main class="box_background"></main> </body> 上記のようにクラスを修正し、CSSを充ててみましたが固定がされませんでした。 うまく理解ができていないように思います。 恐れ入りますが、ご教示いただけますと幸いです。よろしくお願いします。
FKM

2019/02/26 02:40 編集

申し訳ない、absoluteではなくてfixedですね。とにかく、背景だけは動かないようにしておいて、レイヤーを最下段にしておき、固定。上の要素だけ動かすという算段です。 あと固定された背景要素はラッパー要素より前に設置してください。順番に要素を読み取っていくので、 <body> <div class="box_background"><!-- ここに背景--></div> <div class="box_wrapper"> <div class="drawer drawer--right"> <!-- ここにドロワーナビを使ったコンテンツ要素 --> </div> </div> </body> bodyタグで制御すると、階層化できなくなるはずなので、一旦はbodyからはクラス指定しないでください。
fu_ji

2019/02/26 04:37

ありがとうございます。理解できました。 常に固定であればこの内容でいいのですが、 今回の場合、普通は背景もスクロールできるが、ナビが開いた時のみ固定したいのですが そのような場合はどうしていますか? 一応こちらで試した方法としては下記となります。 ・jsでCSSを追加して単純にfixedを切り替える  →ナビを閉じた時にページのトップまで戻ってしまう ・ウィンドウの高さを取得、付与  →問題文と同じく、ナビを開いた直後にナビが閉じてしまう場合がある どうぞよろしくお願いします。
FKM

2019/02/26 06:05 編集

今回のようなケースも上の上下構造を駆使すればいけるはずです。そういう技術はパララックス(視差)制御といって、けっこうjQueryでは定番の技術ですので。 > →ナビを閉じた時にページのトップまで戻ってしまう トップまで戻ってしまうのはtopに - qux と マイナスの数値を入れているせいですね。これによってイベント発生時にWindowの高さ分戻るように命令しています。今回のように背景も並行して動かしている場合は戻す必要はないです。そして、ナビを開いたときに背景だけにfixed制御してあげればいいでしょう。 scrollpos = $('window').scrollTop(); //現在のスクロール位置を取得しているので… $('#box_background').addClass('fixed').css({'top': scrollpos});//固定だけする $('#box_wrapper').css({'top': scrollpos}); //固定はしない もし、背景もナビの位置に合わせて元に戻したい場合は固定を解除した際に、ナビの現在位置の分、背景をずらせば問題ありません。ナビを開いた直後に閉じてしまうのは、最初の問題があるため、高さの計算が合ってないからだと思います。
FKM

2019/02/26 06:01 編集

また、背景だけ動かしたい場合はこういう手を使うといいです。フレームからはみ出した背景画像は表示されないようにするやり方です。 <div class="box_maskframe" style="position: fixed; overflow: hidden;"> <div class="box_background" style="position: absolute"> <img src="backgroundimage.jpg"><!-- 背景の画像 --> </div> </div> あとはabsoluteとなっている要素に対し、コンテンツが移動した分高さを取得して下に上にずらしていけば、見せたい部分だけ見せることができます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問