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

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

发布于 2018-07-23 阅读 468 次 移动端H5 Javascript
####首先解释下穿透这个现象 就是body的默认滚动条可用的时候,我们弹出一个弹窗,在这个弹窗上滑动的时候会触发body的滚动条,我们就会看到弹窗背后的页面主体滚动,这个体验不太好。 ####解决方案 我的解决方案是在弹窗弹出的时候将body的滚动条禁止掉 ```javascript $('body,html').css('overflow','hidden'); ``` 弹窗关闭的时候再解开就是了 ####移动端键盘盖住输入框的 一般我们设置弹窗的时候可以使fixed定位,也可以是absolute定位,当时页面的长度超过100%的时候,这个时候显然用absolute定位就不太合适了。除非不使用body的默认滚动条,但是这样不免要用插件了,我们当然是希望用简单的方法解决。 ####解决方案 scrollIntoView ```javascript $('body').on('click','input',function(e){ setTimeout(function(){ e.target.scrollIntoView(true); },100) }) ```