移动iOS软键盘弹跳空白和滚动问题

在做h5移动端项目的时候，需要给用户一个非常友好的体验。最近抽空整理了一下移动端（iOS端）项目中经常遇到的两个问题。键盘弹出空白。当我们点击输入等时，弹出手机键盘。点击完成后，底部往往会出现和键盘一样大小的空白，但是当我们向下滚动页面时，发现又好了。这是iOS端很常见的问题（应该是layout定位导致的，具体原因没仔细研究）。解决方法是在输入结束时控制滚动条的偏移量。正好。下面是相关代码：){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(()=>{constscrollHeight=document.documentElement.scrollTop||document.body.scrollTop||0window.scrollTo(0,Math.max(scrollHeight-1,0))document.getElementsByTagName('body')[0].className='noTouch'},100)}})}})在iOS端，当当元素获得焦点时，我们将-webkit-overflow-scrolling的值设置为auto以防止滚动穿透。当元素失去焦点时，我们恢复touch的值，这样页面的滚动效果就不会丢失。同时我们控制滚动条偏移1个像素来解决软键盘弹出空白的问题。我再多说几句我设置的-webkit-overflow-scrolling属性：//-webkit-overflow-scrolling这个样式相信大家都不陌生，有两个可选值auto和touch//auto：使用普通滚动，当手指离开触摸屏时滚动立即停止。//touch:使用带有回弹效果的滚动。当手指离开触摸屏后，内容会继续保持滚动效果一段时间。持续滚动的速度和持续时间与滚动手势的强度成正比。它还创建了一个新的堆栈上下文。//为了增加滚动的流畅度，在做iOS移动端适配的时候会加上这个样式适配-webkit-overflow-scrolling:touch;查看兼容性后，我们发现它仅在iOS上可用，但似乎也存在很多问题。我这里补充的主要原因是当input失去焦点的时候，有时候整个页面会卡顿（这个问题在webview中遇到）。我发现加上这个就可以解决这个问题了，把这两个放在一起就好了，不需要加上这个相关的。我用的是mint-ui开发的移动端，所以输入框的时候可以这样使用滚动穿透的问题可以说是一个非常普遍的问题。当我们做弹框滚动的时候，比如地址或者时间选择器selector滚动的时候，底部页面也会一起滚动，一定程度上影响了用户体验。经过查找研究，去掉弹出框时body的touchmove事件可以解决这个问题：//锁定body滚动条--主要解决用户弹出框时的穿透Vue.prototype.closeTouch=function(){document.getElementsByTagName('body')[0].addEventListener('touchmove',this.handler,{passive:false})//阻止默认事件}Vue.prototype.openTouch=function(){document.getElementsByTagName('body')[0].removeEventListener('touchmove',this.handler,{passive:false})//打开默认事件}handler:(e)=>{e.preventDefault()}当我们打开选择器和其他项目符号框架，调用this.closeTouch()以锁定滚动并防止默认事件。弹窗关闭时调用this.openTouch()打开默认事件。虽然过程繁琐，但其实可以解决问题！以上就是我在做iOS移动端项目时遇到的比较常见的问题。希望对您有所帮助。如果有更好的方法，大家可以互相学习！本帖仅供参考学习，转载请注明出处！