Q&A
###前提・実現したいこと
ドロワーメニューを追加したいです。
drawer.js、iscroll.jsを使用しています。
###発生している問題
PCではサブメニューを開き、長くなってもスライドメニュー部分のみをスライドできますが、
スマホでは全く動きません。
丸2日いじりまくりましたが、何をやっても直りません。
お力を貸していただけませんでしょうか。
iscroll.js、drawer.jsは文字数の関係でコードは載せてられませんでした（手を加えておりません）
###該当のソースコード
HTML
1<body class="drawer drawer--right"> 2 3 <div class="spMenu"> 4 <button type="button" class="drawer-toggle drawer-hamburger"> 5 <span class="drawer-hamburger-icon"></span> 6 <span class="drawer-txt">MENU</span> 7 </button> 8 9 <nav class="drawer-nav"> 10 <ul class="drawer-menu"> 11 <li class="drawer-dropdown"> 12 <a href="#" data-toggle="dropdown">メニュー1</a> 13 <ul class="drawer-dropdown-menu"> 14 <li> 15 <a href="#">メニュー1-1</a> 16 </li> 17 </ul> 18 </li> 19 </ul> 20 </nav> 21 </div>
CSS
1 2/*!------------------------------------*\ 3 Base 4*!------------------------------------*/ 5 6.drawer-open { 7 overflow: hidden !important; 8} 9 10.drawer-nav { 11 position: fixed; 12 z-index: 101; 13 top: 0; 14 overflow: auto; 15 width: 50%; 16 height: 100%; 17 color: #222; 18 background-color: #fff; 19 text-align: center; 20} 21.drawer-nav::-webkit-scrollbar { 22 display: none; 23} 24.drawer-nav img { 25 width: 50px; 26 margin: 3rem 0; 27} 28.drawer-menu { 29 margin: 0; 30 padding: 0; 31 list-style: none; 32 background: #eeeef0; 33 overflow: auto; 34 -webkit-overflow-scrolling: touch; 35} 36.drawer-menu > li { 37 font-size: 1.2rem; 38 line-height: 3.5; 39 text-align: left; 40 text-indent: 2rem; 41 border-bottom: 1px solid #cbcbcb; 42} 43.drawer-menu > li:last-child { 44 border-bottom: none; 45} 46.drawer-menu > li a { 47 display: block; 48 width: 100%; 49 height: 100%; 50 font-size: 1.2rem; 51} 52.drawer-menu-item { 53 font-size: 1.3rem; 54 display: block; 55 padding: 1.5rem 2rem; 56 text-decoration: none; 57 color: #222; 58 border-bottom: 1px dotted #222; 59} 60.drawer-menu-item:hover { 61 text-decoration: underline; 62 color: #555; 63 background-color: transparent; 64} 65 66/*! overlay */ 67.drawer-overlay { 68 position: fixed; 69 z-index: 100; 70 top: 0; 71 left: 0; 72 display: none; 73 width: 100%; 74 height: 100%; 75 background-color: rgba(0, 0, 0, .2); 76} 77.drawer-open .drawer-overlay { 78 display: block; 79} 80 81/*!------------------------------------*\ 82 Top 83*!------------------------------------*/ 84 85.drawer--top .drawer-nav { 86 top: -100%; 87 left: 0; 88 width: 100%; 89 height: auto; 90 max-height: 100%; 91 -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 92 transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 93} 94 95.drawer--top.drawer-open .drawer-nav { 96 top: 0; 97} 98 99.drawer--top .drawer-hamburger, 100.drawer--top.drawer-open .drawer-hamburger { 101 right: 0; 102} 103 104/*!------------------------------------*\ 105 Right 106*!------------------------------------*/ 107 108.drawer--right .drawer-nav { 109 right: -50%; 110 -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 111 transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 112} 113 114.drawer--right.drawer-open .drawer-nav, 115.drawer--right .drawer-hamburger, 116.drawer--right.drawer-open .drawer-navbar .drawer-hamburger { 117 right: 0; 118} 119 120.drawer--right.drawer-open .drawer-hamburger { 121 right: 50%; 122} 123 124/*!------------------------------------*\ 125 Hamburger 126*!------------------------------------*/ 127 128.drawer-hamburger { 129 position: fixed; 130 z-index: 104; 131 top: 0; 132 display: block; 133 box-sizing: content-box; 134 width: 3rem; 135 padding: 0; 136 padding-top: 18px; 137 padding-right: 1.8rem; 138 padding-bottom: 30px; 139 padding-left: .75rem; 140 -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 141 transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 142 -webkit-transform: translate3d(0, 0, 0); 143 transform: translate3d(0, 0, 0); 144 border: 0; 145 outline: 0; 146 color: #262626; 147 background-color: transparent; 148} 149 150.drawer-hamburger:hover { 151 cursor: pointer; 152 background-color: transparent; 153} 154 155.drawer-hamburger-icon { 156 position: relative; 157 display: block; 158 margin: 10px 0 13px; 159} 160 161.drawer-hamburger-icon, 162.drawer-hamburger-icon:before, 163.drawer-hamburger-icon:after { 164 width: 100%; 165 height: 2px; 166 -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 167 transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); 168 background-color: #222; 169} 170 171.drawer-hamburger-icon:before, 172.drawer-hamburger-icon:after { 173 position: absolute; 174 top: -10px; 175 left: 0; 176 content: ' '; 177} 178 179.drawer-hamburger-icon:after { 180 top: 10px; 181} 182 183.drawer-open .drawer-hamburger-icon { 184 background-color: transparent; 185} 186 187.drawer-open .drawer-hamburger-icon:before, 188.drawer-open .drawer-hamburger-icon:after { 189 top: 0; 190} 191 192.drawer-open .drawer-hamburger-icon:before { 193 -webkit-transform: rotate(45deg); 194 transform: rotate(45deg); 195} 196 197.drawer-open .drawer-hamburger-icon:after { 198 -webkit-transform: rotate(-45deg); 199 transform: rotate(-45deg); 200} 201.drawer-txt { 202 font-size: 1rem; 203} 204 205/*!------------------------------------*\ 206 Dropdown 207*!------------------------------------*/ 208 209.drawer-dropdown-menu { 210 display: none; 211 box-sizing: border-box; 212 width: 100%; 213 margin: 0; 214 padding: 0; 215 background-color: #fafafa; 216} 217 218.drawer-dropdown-menu > li { 219 width: 100%; 220 list-style: none; 221 font-size: 1.3rem; 222 border-bottom: 1px solid #cbcbcb; 223} 224.drawer-dropdown-menu > li:last-child { 225 border-bottom: none; 226} 227.drawer-dropdown-menu-item { 228 line-height: 3.75rem; 229 display: block; 230 padding: 0; 231 padding-right: .75rem; 232 padding-left: 1.5rem; 233 text-decoration: none; 234 color: #222; 235} 236.drawer-dropdown-menu-item:hover { 237 text-decoration: underline; 238 color: #555; 239 background-color: transparent; 240} 241 242/*! open */ 243.drawer-dropdown.open > .drawer-dropdown-menu { 244 display: block; 245} 246 247/*! drawer-caret */ 248.drawer-dropdown .drawer-caret { 249 display: inline-block; 250 width: 0; 251 height: 0; 252 margin-left: 4px; 253 -webkit-transition: opacity .2s ease, -webkit-transform .2s ease; 254 transition: opacity .2s ease, -webkit-transform .2s ease; 255 transition: transform .2s ease, opacity .2s ease; 256 transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease; 257 -webkit-transform: rotate(0deg); 258 transform: rotate(0deg); 259 vertical-align: middle; 260 border-top: 4px solid; 261 border-right: 4px solid transparent; 262 border-left: 4px solid transparent; 263} 264 265/*! open */ 266.drawer-dropdown.open .drawer-caret { 267 -webkit-transform: rotate(180deg); 268 transform: rotate(180deg); 269} 270 271/*!------------------------------------*\ 272 Container 273*!------------------------------------*/ 274.drawer-container { 275 margin-right: auto; 276 margin-left: auto; 277}
javascript
1<script> 2 $(document).ready(function () { 3 $('.drawer').drawer({ 4 iscroll: { 5 mouseWheel: false, 6 preventDefault: false 7 }, 8 }); 9 }); 10 </script>
###試したこと
・overflow: autoにしてみる
・jqueryのバージョンを変えてみる
・htmlのjavascriptの記載順序を変えてみる
・下記サイトを参考にして修正してみる
ハンバーガーメニューdrawer.jsのスクロールが実機で効かない
iScroll.js と drawer.js のハンバーガーメニューがAndroidで動かない
jquery「Drawer」でレスポンシブメニューを作る際に、スクロールが効かなくなった場合の対処法
あなたの回答
tips
プレビュー
