当前位置:首页 > 关于移动端滚动条穿透问题解决, 移动端键盘盖住输入框的解决scrollIntoView

关于移动端滚动条穿透问题解决, 移动端键盘盖住输入框的解决scrollIntoView

发布于 2018-07-23 阅读 134 次 移动端H5 Javascript

首先解释下穿透这个现象

就是body的默认滚动条可用的时候,我们弹出一个弹窗,在这个弹窗上滑动的时候会触发body的滚动条,我们就会看到弹窗背后的页面主体滚动,这个体验不太好。

解决方案

我的解决方案是在弹窗弹出的时候将body的滚动条禁止掉

$('body,html').css('overflow','hidden');

弹窗关闭的时候再解开就是了

移动端键盘盖住输入框的

一般我们设置弹窗的时候可以使fixed定位,也可以是absolute定位,当时页面的长度超过100%的时候,这个时候显然用absolute定位就不太合适了。除非不使用body的默认滚动条,但是这样不免要用插件了,我们当然是希望用简单的方法解决。

解决方案 scrollIntoView

$('body').on('click','input',function(e){
    setTimeout(function(){
        e.target.scrollIntoView(true);
    },100)
})