ios的微信浏览器输入框失去焦点后页面不能回弹
问题:注册页面,输入完手机号和注册密码,点击获取验证码,图片验证码弹窗弹出,一切进行的都很完美。然而在ios微信浏览器里面,无论点击哪里,弹出层毫无响应。开始排查问题:首先排除不是z-index导致元素点不到,进而无法触发点击事件。因为使用vue框架,所以给click事件加上一个native修饰符,然而仍然毫无响应。然后再排除不是因为css导致无法触发点击事件。直到滑一下...
·
问题:注册页面,输入完手机号和注册密码,点击获取验证码,图片验证码弹窗弹出,一切进行的都很完美。然而在ios微信浏览器里面,无论点击哪里,弹出层毫无响应。
开始排查问题:
-
首先排除不是z-index导致元素点不到,进而无法触发点击事件。
-
因为使用vue框架,所以给click事件加上一个native修饰符,然而仍然毫无响应。
-
然后再排除不是因为css导致无法触发点击事件。
-
直到滑一下页面,才能正常响应点击事件。
一番搜索尝试之后,仍然不知道为什么会出现这个bug,最后认为可能是微信浏览器在ios系统里面的特殊表现,所以还是选择滑动页面来解决问题。
使用js滑动页面应该不是什么问题,可以使用document.body.scrollTop
或者window.scrollTo()
来控制页面滑动。
最后我选择在输入框失去焦点时,使用window.scrollTop来滑动页面。
代码如下
function kickBack() {
window.scrollTo(0, document.body.scrollTop + 1);
document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);
}
写完之后,自测发现时灵时不灵,怎么办?加setTimeout。
function kickBack() {
setTimeout(() => {
window.scrollTo(0, document.body.scrollTop + 1);
document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);
}, 10)
}
再测,发现完美解决问题。
然而为什么这么解决,却是一脸懵。。。
更多推荐
已为社区贡献5条内容
所有评论(0)