web移动端：iscroll实现局部滚动
总结一下最近项目用到的一个功能点，具体要求如下：
body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件。
一开始项目是用touchmove模拟实现，后来决定尝试一下iscroll,碰巧在网上看到这篇文章
在这篇文章中获益匪浅：http://www.cnblogs.com/starof/p/5215845.html
iscroll5中文api地址：http://wiki.jikexueyuan.com/project/iscroll-5/basicfeatures.html
一.iscroll基本介绍
目前版本已经更新到了5，如果可以的话，尽量选择高版本，会将之前版本的一些问题进行修改
二.初始化
iscroll4和iscroll5初始化有所区别：
iscroll4：
必须用id来获取滚动的元素，前面不加’#’；
myscoll=new iScroll() new的时候 i 小写
iscroll5：
可以支持用class来获取，只需在前面写明“.class名”或“#id名”即可；
myscoll=new IScroll() new的时候 i大写
三.基础配置
myScroll1 = new IScroll('#tc-wrapper1', {
hScrollbar:false, //禁止横向滚动
vScroll:true, //为true时允许y轴滚动
bounce:false, //当滚动器到达容器边界时他将执行一个小反弹动画。在老的或者性能低的设备上禁用反弹对实现平滑的滚动有帮助。
click:true, //如果你想你的应用程序响应click事件，那么该设置次属性为true
hideScrollbar: true //是否隐藏滚动条
});四.一个栗子
完整代码如下
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="misapplication-tap-highlight" content="no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="msapplication-tap-highlight" content="no" />
<title>title>
<style>
html,body{
margin:0;
padding: 0;
}
.btn{
position: fixed;
bottom: 0;
width: 100%;
padding: .5rem 0;
background-color: pink;
text-align: center;
color: #fff;
font-weight: 700;
}
.replyCeng{
display: none;
width: 100%;
height:100vh;
position: fixed;
top:0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.replyContainer {
background-color: #fff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
overflow: hidden;
z-index: -2;
}
.replyTitle {
width: 100%;
padding: 1.0625rem 0;
border-bottom: 1px solid #e0e0e2;
color: #575b61;
font-size: .9375rem;
font-weight: 700;
background-color: #fff;
position: relative;
}
.closeReply {
position: absolute;
width: 1rem;
height: 1rem;
top: .25rem;
right: .25rem;
z-index: 202;
margin: 1rem;
}
.replyList {
margin: 0 auto;
width: 100%;
height:14rem;
position: relative;
z-index: -1;
}
.reply-item {
padding: .9375rem 1.625rem;
font-size: .9375rem;
line-height: 1.5;
color: #666666;
border-bottom: 1px solid #e0e0e2;
}
.replyBtn {
/*padding: 1.0625rem 1.625rem;*/
font-size: .9375rem;
color: #1daffa;
font-weight: 700;
/* width: 100%;*/
background-color: #fff;
border-top: 1px solid #e0e0e2;
padding-bottom: 1.0625rem;
}
.replyBtn div {
padding: .6rem;
border: 1px solid #1daffa;
border-radius: .3rem;
margin: 1.0625rem 1.625rem;
margin-bottom: 0;
}
style>
head>
<body>
<div>
<img src="image/langImg.jpg" style="width:100%;height:auto;"/>
div>
<div class="btn" onclick="test()">buttondiv>
<div class="replyCeng">
<div class="replyContainer">
<div class="replyTitle">
<span>睡前小贴士span>
<img class="closeReply" src="image/close.png" />
div>
<div class="replyList" id="tc-wrapper1">
<dl class="num-list">
<div class="reply-item" onclick="selectReply()">要注意哦，睡觉前不要吃水果，可以适当喝牛奶div>
<div class="reply-item">要注意哦，睡觉前不要吃水果，可以适当喝牛奶div>
<div class="reply-item">要注意哦，睡觉前不要吃水果，可以适当喝牛奶div>
<div class="reply-item">要注意哦，睡觉前不要吃水果，可以适当喝牛奶div>
<div class="reply-item">把黑暗的光线试想成大自然的安眠药，从而提示你的身体去大量地制造褪黑激素，这是一种能帮助人平静下来的激素。来自旧金山的专门从事焦虑和失眠的心理学家、心理学博士Steve Orma表示，在入睡前将灯关掉能提高褪黑激素的产量，这样人就会感到倦意。支持这一说法的研究有：2011年发表在《临床内分泌与代谢》期刊上的一篇研究报告表明，在黄昏时刻到睡觉之前暴露在明亮的灯光下会极大地压缩褪黑激素的产量，使人变得极其兴奋。div>
<div class="reply-item">把黑暗的光线试想成大自然的安眠药，从而提示你的身体去大量地制造褪黑激素，这是一种能帮助人平静下来的激素。来自旧金山的专门从事焦虑和失眠的心理学家、心理学博士Steve Orma表示，在入睡前将灯关掉能提高褪黑激素的产量，这样人就会感到倦意。支持这一说法的研究有：2011年发表在《临床内分泌与代谢》期刊上的一篇研究报告表明，在黄昏时刻到睡觉之前暴露在明亮的灯光下会极大地压缩褪黑激素的产量，使人变得极其兴奋。div>
dl>
div>
<div class="replyBtn">
<div>管理div>
div>
div>
div>
<script type="text/javascript" src="js/jquery-3.0.0.min.js">script>
<script type="text/javascript" src="js/iScroll.js">script>
<script type="text/javascript">
function test(){
$(".replyCeng").css("display","-webkit-box");
//$("#tc1").css("display","-webkit-box");
myScroll1 = new IScroll('#tc-wrapper1', {
scrollbarClass: 'myScrollbar' ,
hScrollbar:false,
vScroll:true,
hideScrollbar: true //是否隐藏滚动条
});
$('body').bind("touchmove",function(e){
e.preventDefault();
});
$(".closeReply").unbind("click").bind("click",function(){
$(".replyCeng").css("display","none");
$('body').unbind("touchmove");
});
}
/*显示弹层层调用show方法时重新调用new iScroll()*/
script>
body>
html>结语：
冰冻三尺，非一日之寒，不积跬步，无以至千里