<h1 id="intro">iScroll, smooth scrolling for the web</h1>
iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller.
It works on desktop, mobile and smart TV. It has been vigorously optimized for performance and size so to offer the smoothest result on modern and old devices alike.
iScroll does not just *scroll*. It can handle any element that needs to be moved with user interaction. It adds scrolling, zooming, panning, infinite scrolling, parallax scrolling, carousels to your projects and manages to do that in just 4kb. Give it a broom and it will also clean up your office.
Even on platforms where native scrolling is good enough, iScroll adds features that wouldn't be possible otherwise. Specifically:
* Granular control over the scroll position, even during momentum. You can always get and set the x,y coordinates of the scroller.
* Animation can be customized with user defined easing functions (bounce, elastic, back, ...).
* You can easily hook to a plethora of custom events (onBeforeScrollStart, onScrollStart, onScroll, onScrollEnd, flick, ...).
* Out of the box multi-platform support. From older Android devices to the latest iPhone, from Chrome to Internet Explorer.
<h2 id="iscroll-versions">The many faces of iScroll</h2>
iScroll is all about optimization. To reach the highest performance it has been divided into multiple versions. You can pick the version that better suits your need.
Currently we have the following fragrances:
* **iscroll.js**, it is the general purpose script. It includes the most commonly used features and grants very high performance in a small footprint.
* **iscroll-lite.js**, it is a stripped down version of the main script. It doesn't support snap, scrollbars, mouse wheel, key bindings. But if all you need is scrolling (especially on mobile) *iScroll lite* is the smallest, fastest solution.
* **iscroll-probe.js**, probing the current scroll position is a demanding task, that's why I decided to build a dedicated version for it. If you need to know the scrolling position at any given time, this is the iScroll for you. (I'm making some more tests, this might end up in the regular `iscroll.js` script, so keep an eye on it).
* **iscroll-zoom.js**, adds zooming to the standard scroll.
* **iscroll-infinite.js**, can do infinite and cached scrolling. Handling very long lists of elements is no easy task for mobile devices. *iScroll infinite* uses a caching mechanism that lets you scroll a potentially infinite number of elements.
<h2 id="getting-started">Getting started</h2>
So you want to be an iScroll master. Cool, because that is what I'll make you into.
The best way to learn the iScroll is by looking at the demos. In the archive you'll find a `demo` folder [stuffed with examples](https://github.com/cubiq/iscroll/tree/master/demos). Most of the script features are outlined there.
`IScroll` is a class that needs to be initiated for each scrolling area. There's no limit to the number of iScrolls you can have in each page if not that imposed by the device CPU/Memory.
Try to keep the DOM as simple as possible. iScroll uses the hardware compositing layer but there's a limit to the elements the hardware can handle.
The optimal HTML structure is:
```html
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
```
iScroll must be applied to the wrapper of the scrolling area. In the above example the `UL` element will be scrolled. Only the first child of the container element is scrolled, additional children are simply ignored.
<div class="tip">
<p><code>box-shadow</code>, <code>opacity</code>, <code>text-shadow</code> and alpha channels are all properties that don't go very well together with hardware acceleration. Scrolling might look good with few elements but as soon as your DOM becomes more complex you'll start experiencing lag and jerkiness.</p>
<p>Sometimes a background image to simulate the shadow performs better than <code>box-shadow</code>. The bottom line is: experiment with CSS properties, you'll be surprised by the difference in performance a small CSS change can do.</p>
</div>
The minimal call to initiate the script is as follow:
```html
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>
```
The first parameter can be a string representing the DOM selector of the scroll container element OR a reference to the element itself. The following is a valid syntax too:
```js
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
```
So basically either you pass the element directly or a string that will be given to `querySelector`. Consequently to select a wrapper by its class name instead of the ID, you'd do:
```js
var myScroll = new IScroll('.wrapper');
```
Note that iScroll uses `querySelector` not `querySelectorAll`, so only the first occurrence of the selector is used. If you need to apply iScroll to multiple objects you'll have to build your own cycle.
<div class="tip">
<p>You don't strictly need to assign the instance to a variable (<code>myScroll</code>), but it is handy to keep a reference to the iScroll.</p>
<p>For example you could later check the <a href="#scroller-info">scroller position</a> or <a href="#destroy">unload unnecessary events</a> when you don't need the iScroll anymore.</p>
</div>
<h2 id="initialization">Initialization</h2>
The iScroll needs to be initiated when the DOM is ready. The safest bet is to start it on window `onload` event. `DOMContentLoaded` or inline initialization are also fine but remember that the script needs to know the height/width of the scrolling area. If you have images that don't have explicit width/height declaration, iScroll will most likely end up with a wrong scroller size.
<div class="important">
<p>Add <code>position:relative</code> or <code>absolute</code> to the scroll container (the wrapper). That alone usually solves most of the problems with wrongly calculated wrapper dimensions.</p>
</div>
To sum up, the smallest iScroll configuration is:
```html
<head>
...
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
</script>
</head>
...
<body onload="loaded()">
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</body>
```
Refer to the [barebone example](http://lab.cubiq.org/iscroll5/demos/barebone/) for more details on the minimal CSS/HTML requirements.
<div class="tip">
<p>If you have a complex DOM it is sometimes smart to add a little delay from the <code>onload</code> event to iScroll initialization. Executing the iScroll with a 100 or 200 milliseconds delay gives the browser that little rest that can save your ass.</p>
</div>
<h2 id="configuring">Configuring the iScroll</h2>
iScroll can be configured by passing a second parameter during the initialization phase.
```js
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});
```
The example above turns on mouse wheel support and scrollbars.
After initialization you can access the *normalized* values from the `options` object. Eg:
```js
console.dir(myScroll.options);
```
The above will return the configuration the `myScroll` instance will run on. By *normalized* I mean that if you set `useTransform:true` (for example) but the browser doesn't support CSS transforms, `useTransform` will be `false`.
<h2 id="the-core">Understanding the core</h2>
iScroll uses various techniques to scroll based on device/browser capability. **Normally you don't need to configure the engine**, iScroll is smart enough to pick the best for you.
Nonetheless it is important to understand which mechanisms iScroll works on and how to configure them.
### <small>options.</small>useTransform
By default the engine uses the `transform` CSS property. Setting this to `false` scrolls
没有合适的资源?快使用搜索试试~ 我知道了~
iscroll v5.2.0最新demo下载
共32个文件
html:12个
js:7个
jpg:5个
需积分: 24 44 下载量 189 浏览量
2018-12-04
15:48:03
上传
评论
收藏 284KB RAR 举报
温馨提示
iscroll5用于移动端上拉刷新和下拉加载功能,iScroll5使用基于设备和浏览器性能的各种技术来进行滚动。不需要配置引擎,iScroll5会为你选择最佳的方式
资源详情
资源评论
资源推荐
收起资源包目录
iscroll-master.rar (32个子文件)
iscroll-master
.gitignore 31B
build
iscroll-lite.js 27KB
iscroll-infinite.js 42KB
iscroll-probe.js 54KB
iscroll.js 54KB
iscroll-zoom.js 58KB
CONTRIBUTING.md 306B
LICENSE 1KB
build.js 4KB
README.md 36KB
.nodemonignore 36B
demos
click
index.html 4KB
horizontal
index.html 3KB
minimap
index.html 3KB
ermine.jpg 151KB
carousel
leonardo.jpg 8KB
gaugin.jpg 10KB
index.html 3KB
warhol.jpg 12KB
giotto.jpg 16KB
no-transition
index.html 4KB
demoUtils.js 374B
bounce-easing
index.html 4KB
event-passthrough
index.html 5KB
forms
index.html 4KB
barebone
index.html 4KB
infinite
dataset.php 393B
index.html 5KB
parallax
2d-scroll
index.html 8KB
key-bindings
index.html 4KB
bower.json 662B
RELEASENOTES.md 2KB
共 32 条
- 1
huhyb
- 粉丝: 3
- 资源: 24
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0