IOS下微信弹窗fixed中input定位错位问题

方案一、通过重置scrollTop

代码一：

在input失去焦点的时候 用代码控制页面滑动一下可以修复此问题

document.body.scrollTop = 0;

代码二：

$(“input,select”).blur(function(){
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight – 1, 0));
}, 100);
})

方案二、修改fixed布局为absolute

1. 给body加一个高度

var h=$(window).height(); 
$("body,html").css({"overflow":"hidden","height":h+"px"});

让整个页面等于可视区大小,这样既解决了弹出表单后,遮罩后面的页面跟着滑动,也解决了键盘弹起时，input光标会定位不准。

2. 弹窗打开时，修改弹窗fixed 为 absolute，动态获取当前scrollTop 赋值到 弹窗上

var top=$(window).scrollTop(); 
$("#dialog").css({"top":top,"position":"absloute"});

3.  点击关闭弹窗的时候, 将页面恢复默认值

$("body,html").css({"overflow":"auto","height":"auto"});

其它备注：

采用第三方库 iscroll.js 滚动

上下吸顶吸底布局采用 https://efe.baidu.com/blog/mobile-fixed-layout/ 布局方法

最后编辑：2019-02-20

作者：管理员

这个作者貌似有点懒，什么都没有留下。

站内专栏