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