摘要:在上拉或下拉到頭時,會出現背景白色的現象,因為有了這個定時器,它就會不斷將視圖拉回,導致頁面抖動。在開始拉動頁面時清空定時器,停止拉動時開啟定時器,這樣就可以解決造成的抖動的問題了。
起因
h5的輸入框引起鍵盤導致體驗不好,目前就算微信、知乎、百度等產品也沒有很好的技術方案實現,尤其底部固定位置的輸入框各種方案都用的前提下體驗也并沒有很好,這個問題也是老大難問題了。目前在準備一套與native協議 來解決這個問題,目前項目中的解決方案還是有值得借鑒的地方的,分享一下
業務場景 固定在h5頁面底部的輸入框無論是使用
還是
在聚焦事件觸發調起原生鍵盤時,在ios部分機型(iphone 4s iphone 5等)上會使得鍵盤彈起后遮擋住輸入框,使得用戶體驗不好。
目前的解決方案是寫一個定時任務,在判定是ios打開頁面時,執行以下函數
let timer = setInterval(()=>{ // container 知道整個容器的dom節點 container.scrollIntoView({ block: "start", behavior: "auto" }) },300); //300毫秒是經過多次試驗得到的數值,用戶體驗為佳關于scrollIntoView
scrollIntoView這個API,官方的解釋是
The Element.scrollIntoView() method scrolls the element on which it"s called into the visible area of the browser window.
語法
element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型參數 element.scrollIntoView(scrollIntoViewOptions); // Object型參數
參數
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
alignToTop | -- | boolean | --- | false |
scrollIntoViewOptions | -- | object | -- | -- |
{ behavior: "auto" | "instant" | "smooth", block: "start" | "end", }
在can i use中查到的scrollIntoView的兼容性(主流瀏覽器中不考慮ie)
Firefox 36 以上兼容
chrome 61 以上兼容
safiri 5.1開始 不兼容behavior中的smooth
后續問題當然,這個解決方案智能解決部分機型的問題,要真正解決這個問題還是要依靠native端。
在ios 和 安卓機型的問題因為設置了這個定時任務,就會有一個后續的問題出現,也是在落地項目中有遇到過的,在此說明一下。
在上拉或下拉到頭時,會出現背景白色的現象,因為有了這個定時器,它就會不斷將視圖拉回,導致頁面抖動。
如果在app層做了webview禁止拖動的話就不會有這個問題,當然不能完全依賴app,在程序中我們也需要做此方面的兼容優化。
touchStart(e) { this.clearTimer(); }, touchEnd(e) { this.repairIosInput(); }, clearTimer() { if(this.timer) { clearInterval(this.timer); this.timer = null; }else{ return; } }, repairIosInput() { if(this.timer) { return; } this.timer = setInterval(()=>{ container.scrollIntoView({ block: "start", behavior: "auto" }) },300); }
在開始拉動頁面時清空定時器,停止拉動時開啟定時器,這樣就可以解決造成的抖動的問題了。
總結做為一個老大難的問題,還會用更多的解決方案,請與我聯系,一起討論,早日脫坑!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99308.html
摘要:然而,并沒有直接監聽軟鍵盤的原生事件,只能通過軟鍵盤彈起或收起,引發頁面其他方面的表現間接監聽,曲線救國。軟鍵盤收起表現觸發輸入框以外的區域時,輸入框失去焦點,軟鍵盤收起。可以讓軟鍵盤彈起后,讓焦點元素再次滾到可視區,強迫滾到位。 前言 最近一段時間在做 H5 聊天項目,踩過其中一大坑:輸入框獲取焦點,軟鍵盤彈起,要求輸入框吸附(或頂)在輸入法框上。需求很明確,看似很簡單,其實不然。從...
摘要:解決方法如果使用頁面數據不超過一屏禁止滾動,那么即使變成了頁面也不會有什么變化。 作者:@micky思 @wupq @yewq 在H5的開發中,個人的制作頁面布局習性不同,多多少少會產生在真機上input的光標和鍵盤的彈出會出現的各種BUG,文中整理了部分遇到的問題,歡迎新增 ios移動端輸入框上浮導致輸入位置偏移 問題原因:遮罩層定位為fixed,當鍵盤彈起時,ios11以及以下...
閱讀 3464·2021-11-18 10:02
閱讀 3707·2021-09-13 10:25
閱讀 1920·2021-07-26 23:38
閱讀 2568·2019-08-30 15:44
閱讀 2268·2019-08-30 13:51
閱讀 1223·2019-08-26 11:35
閱讀 2273·2019-08-26 10:29
閱讀 3444·2019-08-23 14:56