快捷導(dǎo)航

iOS移動(dòng)端軟鍵盤彈起空白和滾動(dòng)穿透問題解決方案

更新時(shí)間：2023年07月28日 10:24:21 作者：幽丶墨

這篇文章主要為大家介紹了iOS移動(dòng)端軟鍵盤彈起空白和滾動(dòng)穿透問題解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

在做h5移動(dòng)端項(xiàng)目的時(shí)候，給用戶一個(gè)十分友好的體驗(yàn)是很必要的。最近抽空整理了下移動(dòng)端（iOS端）項(xiàng)目中經(jīng)常碰到的兩個(gè)問題

鍵盤彈起空白

在我們點(diǎn)擊input等彈出手機(jī)鍵盤，在點(diǎn)擊完成后經(jīng)常會(huì)在底部出現(xiàn)跟鍵盤同大小的空白，但是當(dāng)我們滾動(dòng)下頁面發(fā)現(xiàn)又好了，這個(gè)在iOS端可以說很常見的問題了（應(yīng)該是布局定位造成的，具體原因沒仔細(xì)研究），解決方法就是在結(jié)束輸入的時(shí)候控制滾動(dòng)條偏移下就好。

下面是相關(guān)代碼：

.inTouch {
  -webkit-overflow-scrolling: auto;
}
.noTouch {
  -webkit-overflow-scrolling: touch;
}

import Vue from 'vue'
Vue.directive('resetPage', {
  inserted (el) {
    document.body.addEventListener('focusin', () => {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // 軟鍵盤收起的事件處理
        setTimeout(() => {
          document.getElementsByTagName('body')[0].className = 'inTouch'
        }, 100)
      }
    })
    document.body.addEventListener('focusout', () => {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // 軟鍵盤收起的事件處理
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          document.getElementsByTagName('body')[0].className = 'noTouch'
        }, 100)
      }
    })
  }
})

在iOS端，當(dāng)元素獲得焦點(diǎn)的時(shí)候，我們把-webkit-overflow-scrolling的值設(shè)為auto，防止?jié)L動(dòng)穿透。當(dāng)元素失去焦點(diǎn)的時(shí)候，我們把值恢復(fù)為touch，這樣頁面的滾動(dòng)效果不會(huì)丟失，同時(shí)我們控制滾動(dòng)條偏移了1像素，解決軟鍵盤彈起空白的問題。

關(guān)于我設(shè)置的-webkit-overflow-scrolling屬性可多說兩句：

// -webkit-overflow-scrolling這個(gè)樣式相信大家都很熟悉了，有auto、touch兩個(gè)可選值
// auto：使用普通滾動(dòng), 當(dāng)手指從觸摸屏上移開，滾動(dòng)會(huì)立即停止。
// touch：使用具有回彈效果的滾動(dòng), 當(dāng)手指從觸摸屏上移開，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。
// 為了增加滾動(dòng)的流暢性，做iOS移動(dòng)端適配的時(shí)候都會(huì)增加這個(gè)樣式適配的
-webkit-overflow-scrolling: touch;

查看兼容性的事后素我們發(fā)現(xiàn)只在iOS端可用，但是出現(xiàn)的問題也很多，我這里加上主要原因是當(dāng)input失去焦點(diǎn)的時(shí)候，有的時(shí)候整個(gè)頁面會(huì)卡頓?。ㄟ@個(gè)問題在webview中碰到的），我發(fā)現(xiàn)加上這個(gè)之后會(huì)解決這個(gè)問題，就把這兩個(gè)放到一起了，不需要的可以不加上這個(gè)相關(guān)的。

我用的是mint-ui開發(fā)的移動(dòng)端，所以在輸入框的時(shí)候就可以這樣使用

<mt-field class="l-modal-body-input" v-reset-page :attr="{ maxlength: 15 }" v-model="name" label="姓名："></mt-field>

滾動(dòng)穿透問題

這個(gè)可以說也是很常見的問題了，在我們做彈框滾動(dòng)，如地址或時(shí)間picker選擇器的時(shí)候，我們在滾動(dòng)選擇時(shí)候，底部的頁面也會(huì)跟著一起滾動(dòng)，一定程度上影響了用戶的體驗(yàn)。經(jīng)查找研究，當(dāng)我們彈框的時(shí)候移除body的touchmove事件，是可以解決這個(gè)問題的：

// 鎖定body滾動(dòng)條--主要解決用戶彈框滾動(dòng)時(shí)的穿透
Vue.prototype.closeTouch = function () {
  document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive: false}) // 阻止默認(rèn)事件
}
Vue.prototype.openTouch = function () {
  document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive: false}) // 打開默認(rèn)事件
}

handler: (e) => {
    e.preventDefault()
}

當(dāng)我們打開picker等彈框的時(shí)候，調(diào)用this.closeTouch()，鎖定滾動(dòng)，阻止默認(rèn)事件。關(guān)閉彈框的時(shí)候調(diào)用this.openTouch()打開默認(rèn)事件。過程雖然比較麻煩，但能實(shí)際解決問題！

以上是我做iOS移動(dòng)項(xiàng)目時(shí)遇到的比較常見的問題，更多關(guān)于iOS軟鍵盤彈起空白滾動(dòng)穿透的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: