先說下業務邏輯:登陸頁面,滑塊驗證,手機號碼輸入完成之後,會有一個滑塊驗證,驗證正確則會收到短信驗證碼。這就是這個登陸頁面的基本邏輯。spa
出現bug的地方就是在IOS上滑塊沒法拖動,通過檢測發現是在6plus上有這個問題。
1.彈窗是經過fixed定位在頁面上的。
2.當表單激活的時候,因爲手機自帶的輸入法彈起形成頁面向上滾動,會隱藏頁面頂部一部分。
此時形成頁面頂部缺失一部分,因此fixed定位的實際top距離也跟着改變,形成拖拽的滑塊位置偏移到文字位置。相似於第四張圖的效果,黃色部分缺失。code
解決方法:經過input的focus事件改變body的scrollTop值爲0。事件
$('input').focus(function () { console.log($('body').scrollTop()) document.documentElement.scrollTop=0; document.body.scrollTop=0; })
記錄一下開發終於到的問題。圖片