造成这种问题的原因是body没有复位,所以把body 复位就可以了。
解决思路:1、input获取焦点的时候记住当前滚动的位置,2、input失去焦点的时候滚动到之前的位置。(亲测有效)。
附vue 代码,其他框架可以依据该思路修改。
PageScroll:0,// 位置 这个在data 里面定义变量
inputLoseBlur() { setTimeout(() => { window.scrollTo(0, this.PageScroll); }, 100); }, inputLoseFocus() { this.PageScroll = this.GetPageScroll() }, GetPageScroll(){ var y; if (window.pageYOffset) { // all except IE y = window.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { // IE 6 Strict y = document.documentElement.scrollTop; } else if (document.body) { // all other IE y = document.body.scrollTop; } return y },
一共三个方法,第一个是失去焦点的时候滚动到之前位置,第二个是获取焦点的时候将当前位置的数据赋值给变量,第三个是获取当前位置。
<mt-field label="" placeholder="请输入手机号码" @focus.native.capture="inputLoseFocus" @blur.native.capture="inputLoseBlur" type="tel" v-model="loginMsg.mobile"></mt-field>
上面是使用方式。