iOSでスクロールできないようにする | cly7796.net
iOSでモーダルやハンバーガーメニューを開いている時に、スクロールで背景のコンテンツがスクロールされないようにする方法を調べたのでメモ。 うまくいかなかった例 今回は簡単なモーダルを実装してみます。 HTML <header class="header">ヘッダー</header> <div class="contents"> <p>コンテンツ本文コンテンツ本文コンテンツ本文コンテンツ本文</p> <p>コンテンツ本文<button class="modal-link" data-modaibody="modal01">モーダル01</button>コンテンツ本文コンテンツ本文コンテンツ本文</p> ～略～ <p>コンテンツ本文コンテンツ本文コンテンツ本文コンテンツ本文</p> </div> <footer class="footer">フッター</footer> <div class="
ハンバーガーメニューを表示する時、背景を固定する方法 - Qiita
やること あらゆるOSにおいて、スクロールがあるハンバーガーメニューを表示している間、背景のスクロールは動かないようにする。 まえおき 基本的に、スクロールさせるには overflow : scroll;、スクロールをしないようにするにはoverflow: hidden;を使うことが一般的。 アプリケーションのhtmlタグには初期値でoverflow : scroll;がついている。 そのため、わざわざoverflow : scroll;を当てなくてもスクロールできるようになっている。 ちなみに htmlタグにoverflow: hiddenをつけてみてください。ほとんどの場合、スクロールがを防げます。 このほとんどというのがどういうことか後ほどわかります。 実装前のCSSとJSのコード ハンバーガーメニューのCSS .humburger-menu { /*スクロールするようにする*/ o
固定した中身をスクロールさせる方法と慣性スクロールについて | ホームページTIPS
解 説 スマートフォン表示によく使われるハンバーガーナビ。ナビメニューが多いサイトの場合、指でスクロールさせてスルスルッと気持ちよく動かしたいですよね。ナビボタンはスマホ画面の最上部に「position:fixed」で固定させておき、メニューを開いた際に、中身だけがスクロールする、しかも気持ち良く！という方法をご紹介します。 1ナビボタンを「position:fix」で固定させ、中身を「overflow-y: scroll;」でスクロールさせる #sp_gnav_list{ position: fixed; overflow-y: scroll; z-index: 99; top:0; width:100%; height:100%; <---heightを指定します background-color:#f00; } ナビ要素であるsp_gnav_listを「position:fix」で最
ヘッダー・ナビゲーションを固定表示させるアイデア5つ
ヘッダー・ナビゲーションを固定表示させるアイデア5つ 公開日:2017/12/28 /最終更新日:2019/02/09 CSS jQuery・JS Technique 最初から固定表示 基本なので言わずもがなですが一応。単なる固定表示ならCSSの「position: fixed;」だけです。簡単ですね。 HTML <header class="site-header"> <h1 class="site-logo"><img src="images/logo.png" alt="WEBDESIGNDAY"></h1> <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
