レスポンシブで書いているソースのスマホ専用メニューが表示されたときに、スクロールの動きが鈍く、また背景も動いてしまうため、直したいです。
こんにちは、HTMLとCSSの初心者です。
ネット販売用のレスポンシブメニュを作っています。
ベースはテンプレートを使っているのですが、幅640px以下になったときにハンバーガーメニューが出て、タップするとスマホ用のメニューが表示されるようにしています。
発生している問題・エラーメッセージ
メニューはきちんと出るのですが、スマホで見たときにフリックしてもスクロールする動きがスムーズでなく、また、メニューで隠れている背景が動いてしまいます。
該当のソースコード
HTML
1<div class="header-layout"> 2 <div class="title"><a href="https://shopping.geocities.jp/"><img src="img/logo.jpg" alt="OFF" width="100%" /></a></div> 3 <a class="menu-trigger" href="javascript:;"><span></span><span></span><span></span></a> 4 <div class="navi"> 5 <ul> 6 <li><a href="#"><img src="img/plane.png"> BRAND</a> 7 <ul> 8 <li><a href="https://"><img src="img/logo50x50_aj.png" alt=""/></a></li> 9 <li><a href="https://"><img src="img/logo50x50_bv.png" alt="text"/></a></li> 10 <li><a href="https://"><img src="img/logo50x50_bb.png" alt=""/></a></li> 11 <li><a href="https://"><img src="img/logo50x50_co.png" alt=""/></a></li> 12 <li><a href="https://"><img src="img/logo50x50_ch.png" alt=""/></a></li> 13 <li><a href="https://"><img src="img/logo50x50_ck.png" alt=""/></a></li> 14 <li><a href="https://"><img src="img/logo50x50_ds.png" alt=""/></a></li> 15 <li><a href="https://"><img src="img/logo50x50_dg.png" alt=""/></a></li> 16 <li><a href="https://"><img src="img/logo50x50_ea.png" alt=""/></a></li> 17 <li><a href="https://"><img src="img/logo50x50_sf.png" alt=""/></a></li> 18 <li><a href="https://"><img src="img/logo50x50_fe.png" alt=""/></a></li> 19 <li><a href="https://"><img src="img/logo50x50_fr.png" alt=""/></a></li> 20 <li><a href="https://"><img src="img/logo50x50_gu.png" alt="text"/></a></li> 21 <li><a href="https://"><img src="img/logo50x50_jc.png" alt=""/></a></li> 22 <li><a href="https://"><img src="img/logo50x50_ks.png" alt=""/></a></li> 23 <li><a href="https://"><img src="img/logo50x50_ls.png" alt=""/></a></li> 24 <li><a href="https://"><img src="img/logo50x50_mk.png" alt=""/></a></li> 25 <li><a href="https://"><img src="img/logo50x50_mcm.png" alt=""/></a></li> 26 <li><a href="https://"><img src="img/logo50x50_pc.png" alt=""/></a></li> 27 <li><a href="https://"><img src="img/logo50x50_ps.png" alt="/></a></li> 28 <li><a href="https://"><img src="img/logo50x50_pd.png" alt=""/></a></li> 29 <li><a href="https://"><img src="img/logo50x50_sbc.png" alt=""/></a></li> 30 <li><a href="https://"><img src="img/logo50x50_sp.png" alt=""/></a></li> 31 <li><a href="https://"><img src="img/logo50x50_tb.png" alt=""/></a></li> 32 <li><a href=""><img src="img/logo50x50_vvww.png" alt=""/></a></li> 33 </ul> 34 </li> 35 36 </ul> 37 </div> 38 </div>
CSS
1@media only screen and (max-width: 640px) { 2body { 3 font-size: 90%; 4} 5.header-layout { 6 width: 96%; 7 margin-right: auto; 8 margin-left: auto; 9 position: relative; 10 margin-top: 0.5em; 11 margin-bottom: 0.5em; 12} 13.title { 14 width: 40%; 15 display: block; 16 vertical-align: middle; 17 padding: 2%; 18 border: 1px solid #FFFFFF; 19 font-family: "Lucida Console", Monaco, monospace; 20 text-align: center; 21 font-size: 150%; 22} 23.fixed-img img { 24 width: 100%; 25} 26ul { 27 font-size: 100%; 28} 29.top-rec-img { 30 float: none; 31 clear: both; 32 width: 100%; 33 margin-bottom: 1em; 34} 35.top-rec-info { 36 float: none; 37 clear: both; 38 width: 96%; 39} 40.menu-trigger { 41 display: block; 42 position: fixed; 43 right: 5%; 44 top: 3%; 45 width: 20px; 46 height: 18px; 47} 48.menu-trigger span { 49 position: absolute; 50 left: 0; 51 width: 100%; 52 height: 2px; 53 background-color: #000; 54 border-radius: 2px; 55} 56.menu-trigger span:nth-of-type(1) { 57 top: 0; 58} 59.menu-trigger span:nth-of-type(2) { 60 top: 8px; 61} 62.menu-trigger span:nth-of-type(3) { 63 bottom: 0; 64} 65.menu-trigger.active span:nth-of-type(1) { 66 -webkit-transform: translateY(8px) rotate(-45deg); 67 transform: translateY(8px) rotate(-45deg); 68} 69.menu-trigger.active span:nth-of-type(2) { 70 opacity: 0; 71} 72.menu-trigger.active span:nth-of-type(3) { 73 -webkit-transform: translateY(-8px) rotate(45deg); 74 transform: translateY(-8px) rotate(45deg); 75} 76.wrapper { 77 width: 96%; 78} 79#side { 80 width: 100%; 81} 82.navi { 83 display: none; 84 overflow: scroll; 85 width: 100%; 86 height: 100vh; 87} 88.navi-area { 89 position: absolute; 90} 91.navi ul { 92 display: block; 93 vertical-align: middle; 94 text-align: left; 95} 96.navi li { 97 display: block; 98 vertical-align: middle; 99 padding-top: 1em; 100 padding-bottom: 0em; 101 padding-left: 0em; 102 padding-right: 0em; 103} 104.navi li ul li img { 105 width: 20px; 106 height: auto; 107 margin-right: 1%; 108 vertical-align: middle; 109} 110.navi ul a { 111 text-decoration: none; 112 padding: 2%; 113} 114.navi ul a:hover { 115 color: #cccccc; 116} 117.navi li ul li a { 118 width: 96%; 119 display: block; 120} 121.navi-area { 122 display: none; 123 width: 100%; 124 padding: 2%; 125 height: 100vh; 126 background-color: rgba(203,217,217,0.8); 127} 128.navi li ul { 129 position: relative; 130 z-index: 9999; 131 top: 100%; 132 left: 0; 133 width: 96%; 134 padding: 2%; 135 background-color: #FFFFFF; 136 display: block; 137 overflow: hidden; 138 -moz-transition: .2s; 139 -webkit-transition: .2s; 140 -o-transition: .2s; 141 -ms-transition: .2s; 142 transition: .2s; 143} 144.navi li ul li { 145 display: block; 146 float: none; 147 padding: 0; 148 margin: 0; 149 width: auto; 150 margin-bottom: 1em; 151} 152.navi li:hover ul { 153 overflow: visible; 154 display: block; 155} 156.last { 157 margin-bottom: 100px; 158} 159.side-area { 160 float: none; 161 clear: both; 162 width: 100%; 163} 164.main-area { 165 float: none; 166 clear: both; 167 width: 100%; 168} 169.center-layout { 170 width: 100%; 171 margin-right: auto; 172 margin-left: auto; 173 text-align: left; 174} 175.middle-area { 176 width: 96%; 177} 178.middle-area h2 { 179 padding: 0; 180 padding-top: 1em; 181 padding-bottom: 1em; 182 font-size: 150%; 183} 184.mv-area { 185 font-size: 70%; 186} 187.search-layout { 188 width: 90%; 189 margin-right: auto; 190 margin-left: auto; 191} 192.search-postage { 193 padding-top: 1%; 194} 195.search-postage form { 196 width: 100%; 197 float: none; 198 clear: both; 199} 200.search-postage p { 201 float: none; 202 clear: both; 203 width: 100%; 204 line-height: auto; 205} 206.search-postage input { 207 width: 40%; 208 padding: 7px; 209 margin-left: 1em; 210 border: none; 211} 212.searchbutton input { 213 border-radius: 7px; 214 padding-left: 1em; 215 padding-right: 1em; 216 background-color: #333333; 217 color: #FFFFFF; 218} 219.footer { 220 font-size: 120%; 221} 222.footer li { 223 border-bottom: 1px dotted #eeeeee; 224} 225.footer-left { 226 float: none; 227 clear: both; 228 width: 96%; 229 padding: 2%; 230} 231.footer-left img { 232} 233.footer-center { 234 float: none; 235 clear: both; 236 width: 96%; 237 padding: 2%; 238} 239.footer-right { 240 float: none; 241 clear: both; 242 width: 96%; 243 padding: 2%; 244} 245.page-items img { 246 width: 96%; 247 padding: 2%; 248} 249iframe { 250 width: 100%; 251} 252} 253
試したこと
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
を適切と思われる場所に張り付けてはみたのですが、うまくいきませんでした。
補足情報(FW/ツールのバージョンなど)
Dwの最新版を使っています。
回答1件
あなたの回答
tips
プレビュー