移动端的iscroll

在PC端的时候，我们使用的是position：fixed的方法使得导航栏，标题栏等固定在头部

但是，在移动端的开发当中，使用position：fixed固定定位，很多手机都支持不好，尤其是在定位的区域还需要输入内容调取虚拟键盘的时候会出现很多很多的问题

解决这个问题，就不能使用固定定位了，而使用局部滚动出来（iscroll）

首先，给整个html的width和height都设置为100%，并且overflow：hidden，这样保证我们的页面有且只有一屏

html, body {
width: 100%;
height: 100%;
color: #000;
font-size: .14rem;
font-family: "microsoft Yahei", "Arial Narrow";
overflow: hidden;
}

然后，给下面内容多的区域做局部滚动。

这里要先固定这个区域的高度，计算方式：整个屏幕的高度 - 头部的高度

<!--第一步-->
<script type="text/javascript" src="js/ejs.min.js"></script>
<!--第三步-->
<script type="text/template" id="conTemplate">
<%$.each(matchData,function(index,item){%>
<li>
<span><%=item.num%></span>
<span><%=item.name%></span>
<span><%=item.sex%></span>
<span><%=item.score%></span>
</li>
<%})%>
</script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/iscroll-5.1.3.min.js"></script>
<script type="text/javascript">
//    rem
document.documentElement.style.fontSize = document.body.clientWidth / 320 * 100 + "px";

~function () {
var $content = $('.content');
//计算content区域的高度
// 实现竖向局部滚动，我们首先需要把最外层容器的高度设定好
$content.css('height', document.documentElement.clientHeight - $('.header')[0].offsetHeight);
//    第四步 数据绑定
function bindHTML(data) {
var conTemplate = $("#conTemplate").html();
var result = ejs.render(conTemplate, {matchData: data});
$content.children('ul').html(result);

//在数据绑定完成之后再实现局部滚动
/*
* var 实例 = new IScroll(需要局部滚动的区域，{配置参数});
* 初始化成功后，只对当前容器中的第一个子元素实现了滚轮操作，
* document.querySelector('.content').querySelector('*')
* [设置settingd]
* scrollbars: true  显示滚动条，默认是不显示的(开启后，iscroll会默认向content区域
*           添加一个类名为iScrollVerticalScrollbar iScrollLoneScrollbar的div盒子，
*           这个div控制的是样式position：absolute；所以如只想让滚动条在容器中，
*           需要给当前的content增加position：relative)
* fadeScrollbars: true 滚动条当鼠标在区域中的时候显示，离开的时候消失
* mouseWheel: true 设置支持鼠标滚轮滚动
* bounce:false 禁止运动到边界之后反弹
* click: true iscroll为了防止滑动过程中的误操作，默认是把click禁止掉的
*          如果需要点击，则开启click即可
*
* [方法]
* myScroll.refresh() 当滚动区域的内容发生改变的时候，我们让当前的实例刷新一下
*                    这样的话滚动区域的相关值都会跟着重新计算
* myScroll.scrollTo(x,y,time) 滚动到具体的坐标位置
* myScroll.scrollToElement($li[$li.length - 1], 300); 300ms后滚动到最后一个元素
* */
var myScroll = new IScroll('.content', {
scrollbars: true,
fadeScrollbars: true,
mouseWheel: true,
bounce: false,
click: true
});
myScroll.refresh();
//            myScroll.scrollTo(0,-1000,300);
var $li = $content.find('li');
myScroll.scrollToElement($li[$li.length - 1], 300);
}

//    第二步
$.ajax({
url: 'json/data.json',
type: 'get',
dataType: 'json',
cache: false,
success: bindHTML
});
}();
</script>

可以设置滚动条的颜色或者透明度

同时，设置content的position：relative是为了让滚动条只出现在content区域里面

.content {
position: relative;
overflow: hidden;
}

.iScrollIndicator {
opacity: 0.5;
}

这样就完成了局部滚动的操作



在ios上，如果存在局部滚动，就要在局部滚动的区域加上这个属性，如果不加，滚动会很慢，而且看起来会有一卡一卡的感觉