首页 > 前端技术 > IOS下微信弹窗fixed中input定位错位问题
2019
02-20

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/ 布局方法

最后编辑:
作者:管理员
这个作者貌似有点懒,什么都没有留下。