teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2017/07/05 09:19

投稿

退会済みユーザー
answer CHANGED
@@ -1,3 +1,50 @@
1
+ 以下のプロパティを追加することで裏に回ったコンテンツのスクロールを停止させることは出来ます。
2
+ ``` css
3
+ .open {
4
+ overflow-y: hidden;
5
+ }
6
+ ```
7
+
8
+ ただし、メニューを開いた際、コンテンツの位置が一番上に移動してしまいます。
9
+ メニューを開いた際、及び閉じた際にコンテンツのスクロール位置も保持・復元したい場合、
10
+ 以下のようにして、スクロール位置を保持・復元して上げる必要があります。
11
+ ``` javascript
12
+ var $body = $('body');
13
+ var originWindowPageYOffset = 0;
14
+
15
+ $('#js_btn').on('click', function () {
16
+ if ($body.hasClass('open')) {
17
+ $body
18
+ .removeClass('open')
19
+ .css({ marginTop: '' });
20
+ // メニューを開く前のスクロール位置に戻す
21
+ window.scrollTo(0, originWindowPageYOffset);
22
+ }
23
+ else {
24
+ // スクロール量取得
25
+ originWindowPageYOffset = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
26
+
27
+ $body
28
+ .css({ marginTop: originWindowPageYOffset * -1 }) // ネガティブマージンでスクロールしたように見せかける
29
+ .addClass('open');
30
+ }
31
+
32
+ return false;
33
+ });
34
+
35
+ $('#js_nav').on('click', function () {
36
+ $body
37
+ .removeClass('open')
38
+ .css({ marginTop: '' });
39
+ // メニューを開く前のスクロール位置に戻す
40
+ window.scrollTo(0, originWindowPageYOffset);
41
+
42
+ return false;
43
+ });
44
+ ```
45
+
46
+ ---
47
+
1
48
  **「メニューにスクロールが必用なデザイン」**というのが、画面の高さよりモーダル内のコンテンツの高さの方があるためスクロール表示させたいと言うのであれば、```#js_nav```に```overflow-y: auto;```を追加すれば対応可能です。
2
49
  [https://jsfiddle.net/takmatz/s08r48xf/](https://jsfiddle.net/takmatz/s08r48xf/)
3
50
  ※例は上下方向のスクロールのみとしてます。