回答編集履歴

4

誤字の修正

2018/11/20 16:23

投稿

akihiro3
akihiro3

スコア955

test CHANGED
@@ -208,4 +208,4 @@
208
208
 
209
209
  例えばウィンドウと同じで
210
210
 
211
- 何も変化い場合ははみ出してないのだと思います
211
+ スクロールバー出ない場合ははみ出してないのだと思います

3

コメントからの追加回答です

2018/11/20 16:23

投稿

akihiro3
akihiro3

スコア955

test CHANGED
@@ -187,3 +187,25 @@
187
187
  やっぱり背景スクロールが固定できてないなら、
188
188
 
189
189
  他に原因があるのかもですね
190
+
191
+
192
+
193
+ 追記2
194
+
195
+ ---
196
+
197
+ overflowでスクロールしてほしくないものには
198
+
199
+ 「hidden」で
200
+
201
+ スクロールしてほしいものには
202
+
203
+ 「scroll」です
204
+
205
+ どちらも子要素が親要素をはみ出した場合です
206
+
207
+
208
+
209
+ 例えばウィンドウと同じで
210
+
211
+ 何も変化が無い場合ははみ出してないのだと思います

2

コメントからの追加回答です

2018/11/20 15:21

投稿

akihiro3
akihiro3

スコア955

test CHANGED
@@ -13,3 +13,177 @@
13
13
  ```
14
14
 
15
15
  ボタン`click`で`body`に`class`切替えするのはどうですか?
16
+
17
+ 追記
18
+
19
+ ---
20
+
21
+ 特に何も触ることなく
22
+
23
+ 下記追加で背景スクロールは固定出来てます
24
+
25
+
26
+
27
+ ```css
28
+
29
+ body {
30
+
31
+ overflow: hidden;
32
+
33
+ }
34
+
35
+ ```
36
+
37
+ 全コード貼っておきますね
38
+
39
+ ```html
40
+
41
+ <!DOCTYPE html>
42
+
43
+ <html lang="ja">
44
+
45
+ <head>
46
+
47
+ <meta charset="utf-8">
48
+
49
+ <title>sample</title>
50
+
51
+ <style>
52
+
53
+ body {
54
+
55
+ overflow: hidden;
56
+
57
+ }
58
+
59
+
60
+
61
+ .container {
62
+
63
+ position: relative;
64
+
65
+ width: 100%;
66
+
67
+ }
68
+
69
+
70
+
71
+ .gnav {
72
+
73
+ clear: both;
74
+
75
+ top:0px;
76
+
77
+ position: absolute;
78
+
79
+ width: 100%;
80
+
81
+ z-index: 2;
82
+
83
+ }
84
+
85
+
86
+
87
+ #menu-list {display: none;}
88
+
89
+ </style>
90
+
91
+ </head>
92
+
93
+ <body>
94
+
95
+ <p class="menu-btn gmenu">MENU</p>
96
+
97
+
98
+
99
+ <div class="container">
100
+
101
+
102
+
103
+ <p>コンテンツ</p>
104
+
105
+
106
+
107
+ <div class="gnav">
108
+
109
+ <div id="menu-list">
110
+
111
+ <ul>
112
+
113
+ <li>メニュー内容</li>
114
+
115
+ <li>メニュー内容</li>
116
+
117
+ <li>メニュー内容</li>
118
+
119
+ <li>メニュー内容</li>
120
+
121
+ <li>メニュー内容</li>
122
+
123
+ <li>メニュー内容</li>
124
+
125
+ <li>メニュー内容</li>
126
+
127
+ <li>メニュー内容</li>
128
+
129
+ <li>メニュー内容</li>
130
+
131
+ <li>メニュー内容</li>
132
+
133
+ <li>メニュー内容</li>
134
+
135
+ <li>メニュー内容</li>
136
+
137
+ <li>メニュー内容</li>
138
+
139
+ <li>メニュー内容</li>
140
+
141
+ <li>メニュー内容</li>
142
+
143
+ <li>メニュー内容</li>
144
+
145
+ <li>メニュー内容</li>
146
+
147
+ <li>メニュー内容</li>
148
+
149
+ <li>メニュー内容</li>
150
+
151
+ <li>メニュー内容</li>
152
+
153
+ <li>メニュー内容</li>
154
+
155
+ </ul>
156
+
157
+ <p class="list-close menu-btn" title="close">閉じるボタン</p>
158
+
159
+ </div>
160
+
161
+ </div>
162
+
163
+ </div>
164
+
165
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
166
+
167
+ <script type="text/javascript">
168
+
169
+ $(function(){
170
+
171
+ $(".menu-btn").click(function(){
172
+
173
+ $("#menu-list").slideToggle(300);
174
+
175
+ });
176
+
177
+ });
178
+
179
+ </script>
180
+
181
+ </body>
182
+
183
+ </html>
184
+
185
+ ```
186
+
187
+ やっぱり背景スクロールが固定できてないなら、
188
+
189
+ 他に原因があるのかもですね

1

誤字の修正

2018/11/20 13:10

投稿

akihiro3
akihiro3

スコア955

test CHANGED
@@ -1,6 +1,6 @@
1
1
  画面スクロールを無効にするのは
2
2
 
3
- `body`に`overflow: hidden`実現可能です
3
+ `body`に`overflow: hidden`実現可能です
4
4
 
5
5
  ```css
6
6