html5页面四周不留白,关于微信H5页面软键盘输入后页面下方留白的问题(仅IOS)...

前言:手上的微信H5项目做的接近尾声了,结果元旦回来没多久测试说ios端出现了bug,软键盘输完隐藏后页面不会回弹,下方会有一大块留白。之前没出现过这种问题,安卓也没问题。。测试说可能是因为最近她更新了ios版本。。。

一、问题页面示例

a2d803c7c728

下方有一大块留白

二、问题分析

最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试人员反馈,软键盘收起后,再滚动一下页面,下面的留白就会消失。所以只要在输入完毕后模拟一下这个“滚动”的操作,就能解决问题了。

关于这个现象出现的原因个人分析如下,仅供参考。首先了解下window对象的scrollY属性,它返回的是当前垂直滚动的像素数,未发生滚动时值为0,向上滚动为正值。

当软键盘弹出后,页面会被软键盘顶上去,从而改变了window.scrollY的值,当软键盘收起后,页面停留在当前scrollY偏移的位置,所以下方有一大块留白。

因此可以在input失焦后让页面回滚到顶部来解决问题,当然这种解释还是有疑问的,为什么回滚到顶部以后下方多出的留白就消失了?希望知道的朋友能留言解疑。

三、解决方法

input、textarea和select输入或下拉选择后均会出现以上问题。

1、如果使用jquery,修改起来就比较方便$('input, textarea, select').on('blur',function(){

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值