ios頁面overflow:scroll;滾動不流暢及手機web頁面，軟鍵盤彈出，輸入框被遮住

zhisheng 發布于2019-08-29 12:17 / 3501人閱讀

摘要：如果是安卓手機則執行這個功能當點擊框之后，視口高度發生變化，則軟鍵盤彈出了，這時，調用函數，讓頂上去。

在移動端的web開發中，大家會發現，當給一個元素設置overflow:sroll;屬性時，在ios端滑動頁面，頁面滾動的反應很慢，有種卡頓的感覺，但是在安卓端滾動很快，于是這時就有人想到用iscroll.js插件，讓頁面中有overflow:scroll;屬性的元素在ios端和安卓端滾動的都很流暢，是的，這可以解決問題，元素滾動也很流暢，但是，iscroll.js的也經常伴隨著很多問題。例如，他會屏蔽頁面上的很多點擊事件和input框輸入問題等等。當然這些都可以解決，但是弊端很多。于是乎，就有了-webkit-overflow-scrolling:touch;屬性，來解決ios端帶有overflow:sroll;屬性的元素，讓其滾動很流暢。記住，-webkit-overflow-scrolling: touch;屬性要寫在有overflow:sroll;屬性的元素的樣式里。

有時頁面里的一個div給他寫了固定的高度，也寫了overflow:scroll;屬性，并且這個div里有很多input輸入框，當我點擊某一個input時，軟鍵盤彈出，input輸入框在安卓端不會自動頂上去，這時測試就會給你提bug了，這就很麻煩了。于是乎，我就寫了一個自己的方法，讓安卓端的input框自動頂上去，因為在安卓有這個情況，所以做了終端判斷，以下代碼僅供參考：




    
    
    Document
    
    
    



    
        
            您即將審核通過訂單,請您填寫結算信息
        
        輸入姓名：
        輸入年齡：
        輸入性別：
        輸入民族：
        輸入籍貫：
        輸入現住地址：
        輸入手機：
        輸入姓名：
        輸入年齡：
        輸入性別：
        輸入民族：
        輸入籍貫：
        輸入現住地址：
        輸入手機：
    
    確定

截圖：

云服務器 GPU云服務器輸入界面軟鍵盤彈出頁面頁面滾動彈出框被攔截

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111794.html

ios頁面overflow:scroll;滾動不流暢及手機web頁面，軟鍵盤彈出，輸入框被遮住

摘要：如果是安卓手機則執行這個功能當點擊框之后，視口高度發生變化，則軟鍵盤彈出了，這時，調用函數，讓頂上去。在移動端的web開發中，大家會發現，當給一個元素設置overflow:sroll;屬性時，在ios端滑動頁面，頁面滾動的反應很慢，有種卡頓的感覺，但是在安卓端滾動很快，于是這時就有人想到用iscroll.js插件，讓頁面中有overflow:scroll;屬性的元素在ios端和安卓端...

Object 2019-08-20 15:18 評論0 收藏0
可能這些是你想要的H5軟鍵盤兼容方案

摘要：然而，并沒有直接監聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發頁面其他方面的表現間接監聽，曲線救國。軟鍵盤收起表現觸發輸入框以外的區域時，輸入框失去焦點，軟鍵盤收起。可以讓軟鍵盤彈起后，讓焦點元素再次滾到可視區，強迫滾到位。前言最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...

stackvoid 2019-08-23 17:05 評論0 收藏0
ios輸入框的坑(軟鍵盤彈出不靈敏、輸入法影響彈出高度)

摘要：參考地址首先，是這樣的布局父容器里面放一個輸入框和一個按鈕思路是父容器定位，為，為布局在其他事件觸發輸入框出現的時候例如一個評論的，父容器值變為，被軟鍵盤頂上來。參考地址： https://segmentfault.com/a/11...https://blog.csdn.net/github_... 1.首先，是這樣的布局：父容器里面放一個輸入框和一個按鈕思路是：父容器fi...

vvpvvp 2019-08-26 10:56 評論0 收藏0
移動常見疑難問題

摘要：是在系列事件發生后大約才觸發的，混用和就會導致點透問題。獲取視圖原始高度方案二能較好地處理滾動的問題。禁止蒙層底下頁面跟隨滾動原因彈窗是常見的交互方式，而蒙層是彈窗必不可少的元素。平時的開發過程中，經常會遇到一些疑難雜癥，在這里記錄一下常用的解決方案。 UI小姐姐要求的0.5px線原因：不同手機的兼容不一樣，尤其安卓 IOS的Safari表現是比較好的，safari是可以支持浮...

klivitamJ 2019-08-30 15:44 評論0 收藏0