成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

iphone 軟鍵盤彈起，禁止頁面整體往上滾動

marek / 4131人閱讀

摘要：最近在做一個(gè)移動端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤彈起，在手機(jī)上火把頁面整個(gè)卷走，只看到頁面的下半部分。

最近在做一個(gè)移動端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤彈起，在IOS手機(jī)上火把頁面整個(gè)卷走，只看到頁面的下半部分。

首先經(jīng)過反復(fù)調(diào)試，找到兩條重要線索：

1、先找到鍵盤彈起時(shí)頁面中會改變的值：
測試軟鍵盤彈起時(shí)的正文全文高度、可見區(qū)域高度、文檔顯示高度 、被卷去的高度這幾個(gè)值是否的改變（iphone 5真機(jī)測試 320*568）。

    scrollHeight：504  不變
    offsetHeight：504  不變
    clientHeight: 504  不變
    innerHeight: 206   改變
    scrollTop：298     改變
    
    
   改變的值有文檔顯示高度innerHeight、被卷去的高度scrollTop這兩個(gè)值

2、找到一條線索，當(dāng)輸入框在頁面中的位置，比鍵盤高度高時(shí)，軟鍵盤彈起，不會引起頁面往上滾。

于是我就這樣想，當(dāng)鍵盤彈起時(shí)，就先手動讓輸入框彈上來，那么頁面就不會滾了，然后縮短頁面高度，讓輸入框落到頁面底部。

具體做法：

 // 1、輸入框獲取焦點(diǎn)，判斷是否為IOS，如果是，把input的bottom值設(shè)為文檔高度，讓input先飛上天，
 // 2、因?yàn)橹皽y試到，頁面被滾走的時(shí)候，window.innerHeight會改變，所以等鍵盤彈起時(shí)（設(shè)置的100ms），
 // 動態(tài)改變body.height為window.innerHeight，把body的高度縮短到文檔可是區(qū)域高度，
 // 然后設(shè)置input的bottom為0，這樣在視覺上就實(shí)現(xiàn)了效果啦
handleFocus() {
  if (isIOS()) {
    this.$refs.botFooter.style.bottom = window.innerHeight + "px"
    setTimeout(() => this.reset(), 100)
  }
},

reset() {
  document.body.style.height = window.innerHeight + "px"
  this.$refs.botFooter.style.bottom = 0
}

我做的這個(gè)項(xiàng)目是嵌套在app中的，親測有效，并且項(xiàng)目已上線。app中的瀏覽器不會出現(xiàn)ios自帶瀏覽器中下方左右翻頁的那個(gè)菜單條，所以在IOS自帶瀏覽器中可能還有問題。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99689.html

相關(guān)文章

  • iphone 軟鍵盤彈起，禁止頁面整體往上滾動

    摘要：最近在做一個(gè)移動端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤彈起，在手機(jī)上火把頁面整個(gè)卷走，只看到頁面的下半部分。 最近在做一個(gè)移動端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤彈起，在IOS手機(jī)上火把頁面整個(gè)卷走，只看到頁面的下半部分。 首先經(jīng)過反復(fù)調(diào)試，找到兩條重要線索： 1、先找到鍵盤彈起時(shí)頁面中會改變的值： 測試軟鍵盤彈起時(shí)的正文全文高度、可見區(qū)域高度、文檔顯示高度 、被卷去的高度這...

    android_c 評論0 收藏0

  • iphone 軟鍵盤彈起，禁止頁面整體往上滾動

    摘要：最近在做一個(gè)移動端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤彈起，在手機(jī)上火把頁面整個(gè)卷走，只看到頁面的下半部分。 最近在做一個(gè)移動端的項(xiàng)目，底部的輸入框獲得焦點(diǎn)時(shí)，軟鍵盤彈起，在IOS手機(jī)上火把頁面整個(gè)卷走，只看到頁面的下半部分。 首先經(jīng)過反復(fù)調(diào)試，找到兩條重要線索： 1、先找到鍵盤彈起時(shí)頁面中會改變的值： 測試軟鍵盤彈起時(shí)的正文全文高度、可見區(qū)域高度、文檔顯示高度 、被卷去的高度這...

    bluesky 評論0 收藏0

  • 可能這些是你想要的H5軟鍵盤兼容方案

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

    stackvoid 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<