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

Object 發(fā)布于2019-08-20 15:18 / 3058人閱讀

摘要：如果是安卓手機(jī)則執(zhí)行這個(gè)功能當(dāng)點(diǎn)擊框之后，視口高度發(fā)生變化，則軟鍵盤彈出了，這時(shí)，調(diào)用函數(shù)，讓頂上去。

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

有時(shí)頁面里的一個(gè)div給他寫了固定的高度，也寫了overflow:scroll;屬性，并且這個(gè)div里有很多input輸入框，當(dāng)我點(diǎn)擊某一個(gè)input時(shí)，軟鍵盤彈出，input輸入框在安卓端不會(huì)自動(dòng)頂上去，這時(shí)測試就會(huì)給你提bug了，這就很麻煩了。于是乎，我就寫了一個(gè)自己的方法，讓安卓端的input框自動(dòng)頂上去，因?yàn)樵诎沧坑羞@個(gè)情況，所以做了終端判斷，以下代碼僅供參考：




    
    
    Document
    
    
    



    
        
            您即將審核通過訂單,請(qǐng)您填寫結(jié)算信息
        
        輸入姓名：
        輸入年齡：
        輸入性別：
        輸入民族：
        輸入籍貫：
        輸入現(xiàn)住地址：
        輸入手機(jī)：
        輸入姓名：
        輸入年齡：
        輸入性別：
        輸入民族：
        輸入籍貫：
        輸入現(xiàn)住地址：
        輸入手機(jī)：
    
    確定