スマホページで高さはあるのにスクロールができない原因を教えてください。

現在、スマホ用の楽天の店舗ページを作成しています。
heightは合計で6000px程ありスクロールをできるようにしたいのですが、原因がわからずスクロールができない状況です。

###試した事

・1番怪しいoverflow: hidden;を消したりしたのですが、解決しませんでした。
・またbodyやwrapのz-indexが原因かと思いz-index: -999;をしたのですが、解決しませんでした。

・どこか怪しい点や原因が分かる方いたらご指摘宜しくお願い致します。

###ソースコード

HTML
1<body class="drawer drawer--left drawer-close">
2<div class="wrap">
3<!-- 看板画像 -->
4<section id="Kanban" class="section">
5	<h1><img src="img/shop_board.jpg" /></h1>
6	<a class="fas fa-search" href="#"><br><P class="search">検索</P></a>
7	<a class="fas fa-bars" href="#"><br><p class="menu">メニュー</p></a>
8</section>
9<!-- header-list -->
10<div class="nav-big" id="key">
11	<ul>
12		<div class="searchBox_input">
13					  <form name="myForm" method="get" action="http://esearch.rakuten.co.jp/rms/sd/isearch/vc" accept-charset="EUC-JP">
14						<input type="hidden" name="sid" value="352846">
15						<input type="text" name="sitem" id="sitem" placeholder="気になるキーワードで検索">
16						<input type="submit" value="&#xf002;" class="fas">
17					  </form>
18					</div>
19	  <li style="border-left: solid 1.5px rgba(23,21,21,0.8);"><a href="https://www.rakuten.co.jp/fukux2" target="_top" id="top"><i class="far fa-check"></i>New</a></li>
20	  <li><a href="https://search.rakuten.co.jp/search/mall/?sid=352846" target="_top" id="itemlist"><i class="fas fa-crown"></i>ランキング</a></li>
21	  <li><a href="https://www.rakuten.co.jp/fukux2/info.html" target="_top" id="company"><i class="fas fa-th-list"></i>商品一覧</a></li>
22	  <li><a href="https://www.rakuten.co.jp/fukux2/info2.html" target="_top" id="payment"><i class="fas fa-box"></i>カテゴリー</a></li>
23	  <li><a href="https://www.rakuten.co.jp/" target="_blank" id="rakutentop"><i class="fas fa-award"></i>おすすめ</a></li>
24	  <li><a href="https://basket.step.rakuten.co.jp/rms/mall/bs/cart/?shop_bid=352846" target="_top" id="cart"><i class="fas fa-briefcase"></i>ブランド</a></li>
25	</ul>
26  </div>
27	<!-- おすすめ収納グッズ
28	ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー-->
29	<div id="itemIntroduce_2" class="section">
30			<h2>おすすめ収納グッズ</h2>
31			<ul class="Introduce2_wrapper">
32			</ul>
33			<a href="https://search.rakuten.co.jp/search/mall/?sid=352846" class="link_pageCenter">もっと見る
34			</a>
35	</div>
36	<!-- おすすめスイムマリングッズ
37	----------------------------------------------->
38	<div id="itemIntroduce_3" class="section">
39			<h2>スイム・マリングッズ</h2>
40			<ul class="Introduce3_wrapper">
41			</ul>
42			<a href="https://search.rakuten.co.jp/search/mall/?sid=352846" class="link_pageCenter">もっと見る
43			</a>
44	</div>
45
46	<!-- 便利グッズ
47	----------------------------------------------->
48	<div id="itemIntroduce_4" class="section">
49			<h2>便利グッズ</h2>
50			<ul class="Introduce4_wrapper">
51			</ul>
52			<a href="https://search.rakuten.co.jp/search/mall/?sid=352846" class="link_pageCenter">もっと見る
53			</a>
54	</div>
55
56	<!-- アウトドアグッズ
57	----------------------------------------------->
58	<div id="itemIntroduce_5" class="section">
59			<h2>アウトドアグッズ</h2>
60			<ul class="Introduce5_wrapper">
61			</ul>
62			<a href="https://search.rakuten.co.jp/search/mall/?sid=352846" class="link_pageCenter">もっと見る
63			</a>
64	</div>
65
66</div>
67
68</div>
69</body>
70</html>
71

CSS
1
2@media screen and (max-width: 480px) { 
3body{
4    padding: 25px 0 0 ;
5}
6a{
7    cursor: pointer;
8}
9#Kanban{
10    width: 100%;
11    display: flex;
12}
13#Kanban a{
14    cursor: pointer;
15}
16.wrap{
17}
18
19.fas {
20    content: '\f002';
21    content: '\f0c9';   
22}
23
24.fa-search{
25    font-size: 29px;
26    padding-top: 10px;
27    margin-right: 20px;
28}
29
30.search {
31    font-size: 10px;
32    width: 30px;
33    text-align: center;
34    margin-top: 5px;
35}
36
37.fa-bars{
38    font-size: 29px;
39    padding-top: 10px;
40    text-align: center;
41    margin-right: 10px;
42    width: 55px;
43}
44
45.menu{
46    font-size: 10px;
47    width: 100%;
48    text-align: center;
49    margin-top: 5px;
50}
51.nav-big {
52    width: 100%;
53}
54
55.nav-big ul{
56    width: 100%;
57}
58
59
60.slick-dots{
61    display: none;
62}
63
64#topAdvertising{
65    height: auto;
66    margin-top: 20px;
67    border-top: 0.5px dashed black;
68}
69
70.banner1{
71    width: 100%;
72    margin: 0;
73}
74#side{
75    display: none;
76}
77
78/*おすすめスーツケース
79------------------------------*/
80#itemIntroduce_1 {
81    width: 100%;
82}
83#itemIntroduce_1 .ranking_wrapper{
84    margin-left: 0;
85    width: 90%;
86    flex-wrap: wrap;
87    margin: auto;
88}
89#itemIntroduce_1 h2{
90    width: 100%;
91    margin-left: 0;
92    text-align: center;
93}
94
95#itemIntroduce_1 .ranking_item4, .ranking_item5, .ranking_item6, .ranking_item7, .ranking_item8, .ranking_item9{
96    display: block!important;
97}
98
99#itemIntroduce_1 .ranking_item0, .ranking_item1, .ranking_item3, .ranking_item4, .ranking_item6, .ranking_item7{
100    margin-right: 10px;
101}
102
103.ranking_wrapper li{
104    width: 31%;
105}
106
107/*おすすめ収納グッズ
108----------------------------------*/
109#itemIntroduce_2 {
110    width: 100%;
111    margin-left: 0;
112}
113#itemIntroduce_2 .Introduce2_wrapper{
114    margin-left: 0;
115    width: 90%;
116    flex-wrap: wrap;
117    margin: auto;
118}
119#itemIntroduce_2 h2{
120    width: 100%;
121    margin-left: 0;
122    text-align: center;
123}
124
125#itemIntroduce_2 .ranking_item4, .ranking_item5, .ranking_item6, .ranking_item7, .ranking_item8, .ranking_item9{
126    display: block!important;
127}
128
129#itemIntroduce_2 .ranking_item0, .ranking_item1, .ranking_item3, .ranking_item4, .ranking_item6, .ranking_item7{
130    margin-right: 10px;
131}
132#itemIntroduce_2 .link_pageCenter{
133    margin-left: auto;
134}
135.Introduce2_wrapper li{
136    width: 31%;
137}
138
139/*おすすめスイム・マリングッズ
140-------------------------------------------------*/
141#itemIntroduce_3 {
142    width: 100%;
143    margin-left: 0;
144}
145#itemIntroduce_3 .Introduce3_wrapper{
146    margin-left: 0;
147    width: 90%;
148    flex-wrap: wrap;
149    margin: auto;
150}
151#itemIntroduce_3 h2{
152    width: 100%;
153    margin-left: 0;
154    text-align: center;
155}
156
157#itemIntroduce_3 .ranking_item4, .ranking_item5, .ranking_item6, .ranking_item7, .ranking_item8, .ranking_item9{
158    display: block!important;
159}
160
161#itemIntroduce_3 .ranking_item0, .ranking_item1, .ranking_item3, .ranking_item4, .ranking_item6, .ranking_item7{
162    margin-right: 10px;
163}
164#itemIntroduce_3 .link_pageCenter{
165    margin-left: auto;
166}
167.Introduce3_wrapper li{
168    width: 31%;
169}
170
171/*おすすめ便利グッズ
172---------------------------*/
173#itemIntroduce_4 {
174    width: 100%;
175    margin-left: 0;
176}
177#itemIntroduce_4 .Introduce4_wrapper{
178    margin-left: 0;
179    width: 90%;
180    flex-wrap: wrap;
181    margin: auto;
182}
183#itemIntroduce_4 h2{
184    width: 100%;
185    margin-left: 0;
186    text-align: center;
187}
188
189#itemIntroduce_4 .ranking_item4, .ranking_item5, .ranking_item6, .ranking_item7, .ranking_item8, .ranking_item9{
190    display: block!important;
191}
192
193#itemIntroduce_4 .ranking_item0, .ranking_item1, .ranking_item3, .ranking_item4, .ranking_item6, .ranking_item7{
194    margin-right: 10px;
195}
196#itemIntroduce_4 .link_pageCenter{
197    margin-left: auto;
198}
199.Introduce4_wrapper li{
200    width: 31%;
201}
202
203/*アウトドアグッズ
204---------------------------------------------*/
205#itemIntroduce_5 {
206    width: 100%;
207    margin-left: 0;
208}
209#itemIntroduce_5 .Introduce5_wrapper{
210    margin-left: 0;
211    width: 90%;
212    flex-wrap: wrap;
213    margin: auto;
214}
215#itemIntroduce_5 h2{
216    width: 100%;
217    margin-left: 0;
218    text-align: center;
219}
220
221#itemIntroduce_5 .ranking_item4, .ranking_item5, .ranking_item6, .ranking_item7, .ranking_item8, .ranking_item9{
222    display: block!important;
223}
224
225#itemIntroduce_5 .ranking_item0, .ranking_item1, .ranking_item3, .ranking_item4, .ranking_item6, .ranking_item7{
226    margin-right: 10px;
227}
228#itemIntroduce_5 .link_pageCenter{
229    margin-left: auto;
230}
231.Introduce5_wrapper li{
232    width: 31%;
233}
234
235#itemRanking h2 {
236    margin-left: 0;
237    width: 100%;
238    font-size: 25px;
239    padding-bottom: 15px;
240    border-bottom: 3px solid black;
241    text-align: center;
242}
243
244}
245
246

行動規範の内容に同意します

回答2件

ベストアンサー

望み薄ですがdivの閉じタグが一つ多いようですので修正されてみてはどうでしょうか。
そこ以外では記載いただいているコード自体に問題はないように思えます。

原因の箇所を突き止めるため「CSSを消して問題が再現するか」「JSを消して問題が再現するか」などして探ってみてはどうでしょうか。消して問題が解消した場合そのファイルが原因ということになりますので

投稿2019/11/14 04:12

nt4c

総合スコア768

headタグ部分がないのでもしかしたら検討違いかもしれないのですが、
headタグ内に下記のviewportの設定を追加しても解消されないでしょうか？

html
1<meta name="viewport" content="width=device-width,initial-scale=1">

投稿2019/11/13 17:42

tsuyo_244

総合スコア219

T-Heisenberg

2019/11/14 03:42

回答ありがとうございます。 headタグにはviewportの設定はしています。他に何か気になる点やおかしい点などはないでしょうか。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

スマホページで高さはあるのにスクロールができない原因を教えてください。

関連した質問