MUI 当input聚焦之后，弹出自带的键盘之后，内容往上移动

1）有时候为了用户更好的体验，当input聚焦之后，手机自带的键盘弹出的时候，页面的内容也要跟着滚动，好让键盘不遮住input

　　只要把input标签放到mui-content这个类里面就可以了

<div class="mui-content">
　　　　<input />
</div>

2） 但是把input标签放入mui-scroll就不行了。

<div class="mui-content">
　　　　<div class="mui-scroll-wrapper">
　　　　　　<div class="mui-scroll">
　　　　　　　　<input />
　　　　　　</div>
　　　　</div>
</div>

---

更新解决办法：

scroll区域滚动是用div来模拟的，自己也有滚动的方法与监听滚动距离的办法。那么当input被遮挡住之后，我可以强行让scroll滚动键盘高度的距离。这样就能解决遮挡了。

$("#focus").focus(function(){
    mui('.mui-scroll-wrapper').scroll().scrollTo(0,y,100);
})

在我写的例子中，input滚动到屏幕底部，就是刚好不遮住input的位置的值为-1545，假设键盘高度为400，那么上面的y值就是 -（1545+400）即-1945。

最终结果：

如果input后面最多只有几十px的距离会不会影响失去焦点后整个页面的位置？经过测试是不会的。

如果想input失去焦点之后回到原来获取焦点的位置，那么可以保存最开始聚焦位置的值，blur的时候再让页面滚动到原来的位置就行了。

监听滚动距离的方法：

jq：

var scroll = mui('.mui-scroll-wrapper').scroll();
$('.mui-scroll-wrapper' ).on('scroll', function (e ) {
      console.log(scroll.y);
})

js：

var scroll = mui('.mui-scroll-wrapper').scroll();
document.querySelector('.mui-scroll-wrapper' ).addEventListener('scroll', function (e ) {
      console.log(scroll.y);
})

或者是这一种方法：

window.onresize=function(){
    document.activeElement.scrollIntoView(false);
}

activeElement表示获得焦点的元素，scrollIntoView()，里面的参数是true或者省略的时候就是让该元素顶端对齐，false的时候是底端对齐，。scrollIntoView()也可以换成scrollIntoViewIfNeeded（）。

上面这两种方式不知道在ios的效果如何，没测试过。