解决代码
后台框架嵌入iframe的情景,iframe内部页面输入框唤醒软键盘,控制顶层window滚动
var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if(wechatInfo){
$("input,textarea").blur(function(){
var currentPosition,timer;
var speed=1;//页面滚动距离
timer = setInterval(function(){
currentPosition = $('window.top').scrollTop();
currentPosition-=speed;
window.top.scrollTo(0,currentPosition);//页面向上滚动
currentPosition+=speed; //speed变量
window.top.scrollTo(0,currentPosition);//页面向下滚动
clearInterval(timer);
},1);
})
}
普通页面
if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
$("input,textarea").blur(function(){
var currentPosition,timer;
var speed=1;//页面滚动距离
timer=setInterval(function(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);//页面向上滚动
currentPosition+=speed; //speed变量
window.scrollTo(0,currentPosition);//页面向下滚动
clearInterval(timer);
},1);
})
}
}
后来在开发中,ios 嵌入h5页面也出现这种状况了,思路是一样的
onblurFn(index) {
setTimeout(() => {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
// window.scrollTo(0, Math.max(scrollHeight - 1, 0));
this.scrollAnimation(Math.max(scrollHeight - 1, 0), 0)
}, 100);
},
scrollAnimation(currentY, targetY) { // 解决
// 获取当前位置方法
// const currentY = document.documentElement.scrollTop || document.body.scrollTop
// 计算需要移动的距离
let needScrollTop = targetY - currentY
let _currentY = currentY
setTimeout(() => {
// 一次调用滑动帧数,每次调用会不一样
const dist = Math.ceil(needScrollTop / 14)
_currentY += dist
window.scrollTo(_currentY, currentY)
// 如果移动幅度小于十个像素,直接移动,否则递归调用,实现动画效果
if (needScrollTop > 14 || needScrollTop < -14) {
scrollAnimation(_currentY, targetY)
} else {
window.scrollTo(_currentY, targetY)
}
}, 1)
}