ios 11系统fixed布局下input光标问题

最新推荐文章于 2023-11-21 16:27:49 发布

原创最新推荐文章于 2023-11-21 16:27:49 发布 · 1k 阅读

CC 4.0 BY-SA版权

25 篇文章

订阅专栏

针对iOS11系统中fixed布局下input光标错位问题，本文提供了详细的解决方案，包括更改弹窗定位方式及禁止页面滚动等方法。

系统：ios 11

页面布局：fixed定位的弹窗，弹窗上有input输入框

现象：input元素获取焦点时光标正常，点击键盘输入之后光标会出现错位（掉下去了）

引起原因：弹框的定位采取position：fixed，而ios（safari）对定位属性position：fixed的解析不一致导致。

遮罩层与弹窗层平行，遮罩层仍旧是fixed定位，弹窗层改为absolute定位

<div class="mask" style="position: absolute;background-color: rgba(0,0,0,0.7)"></div>
<div class="dialog" style="position: absolute"></div>

此时弹窗层定位相对于页面整体内容的顶部，所以弹窗定位的top值要加上页面滚动的距离

var scroll = $(window).scrollTop();

此时弹窗可以出现在视窗范围内，但是会随着页面一起上下滚动。此处有两种解决方案

window.onscroll = function(){
    dialog.css('top', (scroll + 125) + 'px');
};

能解决问题，但是由于弹窗的高度调整是由页面滚动触发的，在页面滚动结束 => 弹窗到达正确位置的这段时间内，弹窗是跟随页面滚动的，所以弹窗会“抖动”，在慢慢滚动页面时更为明显，暂时未有解决办法。

$('html,body').addClass('ovf-hidden');
.ovf-hidden{
    height: 100%;
    overflow: hidden;
}

禁止滚动之后页面会回到顶部，需要把页面整体内容上移至用户滚动的位置

<body>
    <div class="container"><!--内容--></div>
</body>
container.css('top', -scroll + 'px');

弹窗关闭后，将页面禁止滚动去掉，并把container的位移也去掉，把页面滚动回弹窗前的位置

$('html,body').removeClass('ovf-hidden');
$(window).scrollTop(Math.abs($('#app').css('top').split('px')[0]));
$('#app').css('top', 0);

ios 11 测试完美，弹窗时页面不滚动，弹窗前后页面展示的区块不变，光标也不再错位

移动端弹出层滚动时禁止body滚动

原理：阻止元素默认滑动事件，用这个插件自己的滑动方式实现滑动。

还没试用