jQuery iScroll.js 移动端滚动条美化插件第1/5页

2020-05-27 18:10:10易采站长站整理

官网:http://cubiq.org/iscroll-5

demo:

滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

 ’Carousel’ demo

iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项。

一、用法

iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数。

使用iScroll时,DOM树的结构要足够简单,移除不必要的标签,避免过多的标签嵌套。

1、html部分

1.1、最优最简单的iScroll结构


<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div>

本例中,ul标签将被滚动。iScroll一定要与滚动内容外的wrapper配合才能生效。

1.2、只有wrapper里的第一个子元素才可以滚动

因为只有wrapper里的第一个子元素才科院滚动,所以要让多个元素滚动 ,写法如下:


<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</div>
</div>

scroller这个元素可以滚动,即便它包含两个ul元素。

2、js调用部分

2.1 、使用onDomContentLoaded事件实现滚动

适用于滚动内容只包含文字、图片,并且所有的图片都有固定的尺寸


<script src="iscroll.js"></script>
<script>
var myscroll; //myscroll是全局变量,可以在任意地方调用
function loaded(){
myscroll=new iScroll("wrapper");
} window.addEventListener("DOMContentLoaded",loaded,false);
</script>

2.2、使用onLoad事件实现滚动

因为DOMContentLoaded事件是载入DOM结构后就会被调用,所以在图片等元素未载入前可能无法确定滚动区域的长宽,此时可以使用onLoad事件来实现。


<script src="iscroll.js"><script>
<script>
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
},100 );
}
window.addEventListener("load",loaded,false);
</script>

这种情况下iScroll会在页面资源(包括图片)加载完毕100ms之后得到初始化,这应该是一种比较安全的调用iScroll的方式。

2.3、弹框中的滚动条加载

弹框一般用display:none和display:block切换来实现。

display:none的元素浏览器没有渲染,所以无法计算滚动内容的高度。