ios input滑动 ios滑动输入技巧

在移动端的web开发中，大家会发现，当给一个元素设置overflow:sroll;属性时，在ios端滑动页面，页面滚动的反应很慢，有种卡顿的感觉，但是在安卓端滚动很快，于是这时就有人想到用iscroll.js插件，让页面中有overflow:scroll;属性的元素在ios端和安卓端滚动的都很流畅，是的，这可以解决问题，元素滚动也很流畅，但是，iscroll.js的也经常伴随着很多问题。例如，他会屏蔽页面上的很多点击事件和input框输入问题等等。当然这些都可以解决，但是弊端很多。于是乎，就有了-webkit-overflow-scrolling:touch;属性，来解决ios端带有overflow:sroll;属性的元素，让其滚动很流畅。记住，-webkit-overflow-scrolling: touch;属性要写在有overflow:sroll;属性的元素的样式里。

有时页面里的一个div给他写了固定的高度，也写了overflow:scroll;属性，并且这个div里有很多input输入框，当我点击某一个input时，软键盘弹出，input输入框在安卓端不会自动顶上去，这时测试就会给你提bug了，这就很麻烦了。于是乎，我就写了一个自己的方法，让安卓端的input框自动顶上去，因为在安卓有这个情况，所以做了终端判断，以下代码仅供参考：

Document 
 
/*动态计算html的font-size*/
//自己的写法
window.onload = function(){
getRem(720,100)
};
window.onresize = function(){
getRem(720,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
html,body{height:100%;}
.absolutewrapper{position:relative;width:100%;height:100%;}
.absolutewrapperslide{position:absolute;left:0;top:0;bottom:1rem;width:100%;overflow:scroll;-webkit-overflow-scrolling : touch;z-index:10000;margin:0 auto;}
.absolutewrapperslide div{padding:0.1rem;font-size:0.32rem;border-top:0.03rem solid #efefef;}
.absolutewrapperslide div input{padding:0.1rem;border:0.02rem solid #ddd;}
.footer{display:block;position:absolute;bottom:0;left:0;z-index: 10001;font-size:0.32rem;background-color:#e02222;color:#fff;width:100%;height:1rem;text-align:center;line-height:1rem; }
.text{padding:16px;text-align: center;background:#efefef;}
 
 
您即将审核通过订单,请您填写结算信息
 
   

     输入姓名： 
   
 
   

     输入年龄： 
   
 
   

     输入性别： 
   
 
   

     输入民族： 
   
 
   

     输入籍贯： 
   
 
   

     输入现住地址： 
   
 
   

     输入手机： 
   
 
   

     输入姓名： 
   
 
   

     输入年龄： 
   
 
   
     输入性别： 
   
 
   

     输入民族： 
   
 
   

     输入籍贯： 
   
 
   

     输入现住地址： 
   
 
   

     输入手机：

确定

$(function(){
//判断访问终端
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
};
function pso(_this){
var _top = parseInt($(_this).offset().top);//这个_top指当前目标元素相对于当前视口(window)的顶部距离
var scrol = $(".absolutewrapperslide").scrollTop();
$(".absolutewrapperslide").scrollTop(scrol+_top-100);//这个100是自己定的，最后的作用是当软键盘弹出后让该目标input距离视口顶部多少距离，从而让input自动顶上去。可以根据自己的视觉感受，自定义这个值，只要input框在几乎所有的手机中都不能被软键盘遮住就可以了。
}
if(browser.versions.android){//如果是安卓手机则执行这个功能
$("input").on("focusin",function(event){
var _this = this;
$(window).resize(function(){//当点击input框之后，视口高度发生变化，则软键盘弹出了，这时，调用pso()函数，让input顶上去。
pso(_this);
})
})
}
})

截图：