国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

iphone 軟鍵盤(pán)彈起，禁止頁(yè)面整體往上滾動(dòng)

marek / 4109人閱讀

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

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

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

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

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

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

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

具體做法：

 // 1、輸入框獲取焦點(diǎn)，判斷是否為IOS，如果是，把input的bottom值設(shè)為文檔高度，讓input先飛上天，
 // 2、因?yàn)橹皽y(cè)試到，頁(yè)面被滾走的時(shí)候，window.innerHeight會(huì)改變，所以等鍵盤(pán)彈起時(shí)（設(shè)置的100ms），
 // 動(dòng)態(tài)改變body.height為window.innerHeight，把body的高度縮短到文檔可是區(qū)域高度，
 // 然后設(shè)置input的bottom為0，這樣在視覺(jué)上就實(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中的，親測(cè)有效，并且項(xiàng)目已上線(xiàn)。app中的瀏覽器不會(huì)出現(xiàn)ios自帶瀏覽器中下方左右翻頁(yè)的那個(gè)菜單條，所以在IOS自帶瀏覽器中可能還有問(wèn)題。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99689.html

相關(guān)文章

  • iphone 軟鍵盤(pán)彈起，禁止頁(yè)面整體往上滾動(dòng)

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

    android_c 評(píng)論0 收藏0

  • iphone 軟鍵盤(pán)彈起，禁止頁(yè)面整體往上滾動(dòng)

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

    bluesky 評(píng)論0 收藏0

  • 可能這些是你想要的H5軟鍵盤(pán)兼容方案

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

    stackvoid 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<