資訊專欄INFORMATION COLUMN
摘要：出現(xiàn)的地方就是在上滑塊無法拖動(dòng)，經(jīng)過檢測(cè)發(fā)現(xiàn)是在上有這個(gè)問題。彈窗是通過定位在頁面上的。當(dāng)表單激活的時(shí)候，由于手機(jī)自帶的輸入法彈起造成頁面向上滾動(dòng)，會(huì)隱藏頁面頂部一部分。解決方法通過的事件改變的值為。記錄一下開發(fā)終于到的問題。
先說下業(yè)務(wù)邏輯：登錄頁面，滑塊驗(yàn)證，手機(jī)號(hào)碼輸入完成以后，會(huì)有一個(gè)滑塊驗(yàn)證，驗(yàn)證正確則會(huì)收到短信驗(yàn)證碼。這就是這個(gè)登錄頁面的基本邏輯。
出現(xiàn)bug的地方就是在IOS上滑塊無法拖動(dòng)，經(jīng)過檢測(cè)發(fā)現(xiàn)是在6plus上有這個(gè)問題。
1.彈窗是通過fixed定位在頁面上的。
2.當(dāng)表單激活的時(shí)候，由于手機(jī)自帶的輸入法彈起造成頁面向上滾動(dòng)，會(huì)隱藏頁面頂部一部分。
此時(shí)造成頁面頂部缺失一部分，所以fixed定位的實(shí)際top距離也跟著改變，造成拖拽的滑塊位置偏移到文字位置。類似于第四張圖的效果，黃色部分缺失。
解決方法：通過input的focus事件改變body的scrollTop值為0。
$("input").focus(function () {
console.log($("body").scrollTop())
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
})
記錄一下開發(fā)終于到的問題。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103239.html
摘要：出現(xiàn)的地方就是在上滑塊無法拖動(dòng)，經(jīng)過檢測(cè)發(fā)現(xiàn)是在上有這個(gè)問題。彈窗是通過定位在頁面上的。當(dāng)表單激活的時(shí)候，由于手機(jī)自帶的輸入法彈起造成頁面向上滾動(dòng)，會(huì)隱藏頁面頂部一部分。解決方法通過的事件改變的值為。記錄一下開發(fā)終于到的問題。 先說下業(yè)務(wù)邏輯：登錄頁面，滑塊驗(yàn)證，手機(jī)號(hào)碼輸入完成以后，會(huì)有一個(gè)滑塊驗(yàn)證，驗(yàn)證正確則會(huì)收到短信驗(yàn)證碼。這就是這個(gè)登錄頁面的基本邏輯。 showImg(http...
摘要：出現(xiàn)的地方就是在上滑塊無法拖動(dòng)，經(jīng)過檢測(cè)發(fā)現(xiàn)是在上有這個(gè)問題。彈窗是通過定位在頁面上的。當(dāng)表單激活的時(shí)候，由于手機(jī)自帶的輸入法彈起造成頁面向上滾動(dòng)，會(huì)隱藏頁面頂部一部分。解決方法通過的事件改變的值為。記錄一下開發(fā)終于到的問題。 先說下業(yè)務(wù)邏輯：登錄頁面，滑塊驗(yàn)證，手機(jī)號(hào)碼輸入完成以后，會(huì)有一個(gè)滑塊驗(yàn)證，驗(yàn)證正確則會(huì)收到短信驗(yàn)證碼。這就是這個(gè)登錄頁面的基本邏輯。 showImg(http...
摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)Web開發(fā)需要注意...
摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)Web開發(fā)需要注意...
摘要：解決方案可以解決在手機(jī)上點(diǎn)擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設(shè)計(jì)方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋果設(shè)備的顯示屏中，像素點(diǎn)個(gè)變?yōu)閭€(gè)。 原文鏈接 - https://github.com/FrontEndRo... H5項(xiàng)目常見問題及注意事項(xiàng) Meta基礎(chǔ)知識(shí)： H5頁面窗口自動(dòng)調(diào)整到設(shè)備...
閱讀 2584·2021-11-23 09:51
閱讀 3129·2019-08-30 15:54
閱讀 1082·2019-08-30 14:14
閱讀 3555·2019-08-30 13:59
閱讀 1416·2019-08-29 17:09
閱讀 1474·2019-08-29 16:24
閱讀 2860·2019-08-29 15:43
閱讀 921·2019-08-29 12:45
