一、iScroll简介
iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25，目前最新版本是iScroll5，大家可以去官网下载。
官网地址：http://iscrolljs.com/
二、iScroll使用方法
1.iScroll使用结构
最优化使用iScroll的结构一般如下所示：
html:
<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</div>
</div>注：1、iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。 2、只有wrapper里的第一个子元素才可以滚动。
2、实例化iScroll
iScroll必须在调用之前实例化，实例化代码如下（在head标签中添加如下代码）：
<script src="iscroll.js"></script>
<script>
var myscroll;//myscroll是全局变量，可以任意地方调用
function loaded(){
myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>三、滚动测试实例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="iscroll-4.2.5fix.js"></script><!--引入js包-->
<!--实例化iScroll-->
<script type="text/JavaScript">
var myscroll;
function loaded(){
myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
<!--css样式设置-->
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
</style>
<title>滚动测试</title>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li>Pretty row 1</li>
<li id="aaa">Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
</ul>
</div>
</div>
</body>
</html>来源：http://blog.csdn.net/cuixinyang19_/article/details/79624502
关闭
js如何实现滚动到一定位置将内容固定在页面顶部
window.onscroll为滚轮监听，document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。固定位置的top要设为负值，原因不明，若为0则会跟上方有空隙。左右位置虽然是0也要设，不然若为不是100%宽度的内容会出现左右跳动。
js禁止页面滚动
发移动端页面的时候有一个很比较常见的需求，在出现弹窗时，禁止滑动弹窗后面的主体页面。如何实现呢，往下看
移动端滚动穿透问题解决方案
移动端有可滚动的弹窗肯定会遇到的问题，滑动弹层背景跟着滚动，如果弹窗里面的内容不需要滚动的可以直接粗暴的把滚动事件禁用掉，但是如果弹窗内容过多需要滚动那就不可以这样做。以下这个解决办法在线上使用没有问题，可以大胆拿去用
js将滚动条scrollbar保持在最顶/底部
在某些场景中，我们通常会遇到需要将滚动条保持在顶/底部,比如：在线客服聊天对话中，始终让聊天对话框保持在最底部使得能一直看到最新的聊天记录
页面平滑滚动小技巧
今天写需求的时候发现一个小的优化点：用户选择了一些数据之后, 对应列表中的数据需要高亮， 有时候列表很长， 为了提升用户体验，需要加个滚动， 自动滚动到目标位置。
js+css 实现 滚动条滑动时显示，不滑动时隐藏
把原有的滚动条隐藏，创建个新的滚动条，并拓展其宽度，达到隐藏的效果,而判断滚动条是否滚动，保存原有的滚动条到顶部的距离，看是否发生改变，做出相应的判断。
解决多个window.onscroll覆盖的问题
默认一个页面只能同时存在一个window.onscroll函数。有的时候我们会引入工具的js框架，在框架中使用onscroll统一监听每个页面，但是在某个页面，我们可能还要使用onscroll来监控滚动条，完成具体某个业务逻辑，这是该怎么做呢？
background-attachement视差滚动
之前项目中没有涉及到视觉滚动的网站，但是毕竟是一种常用的网站类别，不得不了解。实现方法很简单，做一下简单的分析。滚动视差是指多层背景以不同的速度移动，形成立体的运动效果，来带非常出色的视觉体验。
JS 判断元素是否可以滚动
今天在解决 ios 移动端滚动穿透的问题时遇到一个问题，就是判断元素能否滚动，把这个过程记录下来。以下以纵向滚动为例，横向滚动同理。scrollHeight 是一个元素内容高度的度量，包括由于溢出导致的视图中不可见的内容
css修改浏览器默认滚动条样式
写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法，直接上代码。这个的优点在于 鼠标移上才会显示修改的滚动条 体验很好
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!