HTML5 Application Development: JavaScript library iScroll tutorial, html5iscroll

HTML5 Application Development: JavaScript library iScroll tutorial, html5iscroll

Directory

1. Introduction to iScroll

2. Installation and Use

3. Simple iScroll example

4. Pinch & Zoom

5. Snap to element

6. iScroll detailed parameters

1. iScrollIntroduction

Generally, when developing a traditional Web site, we occasionally fix the width/height of a certain area, and then borrow the overflow: scroll, you can move the scroll bar to view the content that exceeds the range of the region.

In mobile Safari and Android browsers of iOS (lower than iOS 5), the native does not support the overflow: scroll attribute in any area of the page. The traditional approach is to use the absolute positioning Header and Footer, and then let the entire page content scroll. The emergence of iScroll is to use Javascript to simulate the overflow: scroll attribute of CSS to solve the scrolling problem of elements in the page.

Because iScroll uses the transform3d attribute to simulate the rolling effect, the performance is also very good, because this attribute can use the hardware acceleration provided by the platform. In actual use, the effect is smooth and smooth, and can be comparable to that of native.

The sample code in this article can be downloaded from GitHub at https://github.com/cubiq/iscroll.

2.Installation and Use

IScroll installation is very simple. You only need to download the latest version from Github. iScroll is a pure JS library, so you can use the script tag to include iScroll like other JS scripts. js, which does not depend on jQuery or other library files:

<Script type = "application/javascript" src = "script/iscroll. js"> </script>

 

3.SimpleIScrollExample

In this example, a List View of the Native App style is implemented using the iScroll template step by step.

Step 1: Add iScroll. js

<Script type = "application/javascript" src = "script/iscroll. js"> </script>

Step 2: After the page is loaded, instantiate the iScroll and loaded functions. The typical code is as follows:

 

 

1	<script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { checkDOMChanges: true }); } document.addEventListener('DOMContentLoaded', loaded, false); </script>

 

MyScroll is a global variable. You can use the scroroller function anywhere. When DOMContentLoaded is triggered, the load function is loaded. However, sometimes it takes some time to load the DOM and the iScroll content may cause page exceptions. You can add a settimeout for the load function, the Code is as follows:

 

 

1	<script type="application/javascript" src="iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { setTimeout(function () { myScroll = new iScroll('wrapper'); }, 100); } window.addEventListener('load', loaded, false); </script>

 

Step 3: Add HTML elements. In this example, the elements include header, footer, and wrapper (List scrolling area). The Code is as follows:

 

[Xhtml] <div id = "header"> iScroll </div> <div id = "wrapper"> <div id = "scroller"> <ul id = "thelist"> <li> Pretty row 1 </li> <li> 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> </ul> </div> </ div> <div id = "footer"> </div> [/xhtml]

# Wrapper is the display window. # scroller is a set containing all lists. Generally, scroller is larger than wrapper. scroller is rolled in wapper and only elements in wapper are displayed. By default, iScroller will only scroll to the first element in # wrapper. If you need to scroll multiple elements, enter the following method:

 

[Xhtml] <div id = "wrapper"> <div id = "scroller"> <ul> <li> </li> ...... </ul> <li> </li> ...... </ul> </div> [/xhtml]

Step 4: add the style sheet CSS:

We need to fix the header and footer, so their style is as follows:

 

[Xhtml] # header {position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 45px; line-height: 45px; background-image:-webkit-gradient (linear, 0 0, 0 100%, color-stop (0, # fe96c9), color-stop (0.05, # d51875 ), color-stop (1, # 7b0a2e); background-image:-moz-linear-gradient (top, # fe96c9, # d51875 5%, # 7b0a2e); background-image: -o-linear-gradient (top, # fe96c9, # d51875 5%, # 7b0a2e); padding: 0; color: # eee; font-size: 20px; text-align: center ;}# footer {position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 48px; background-color: #222; background-image:-webkit-gradient (linear, 0 0, 0 100%, color-stop (0, #999), color-stop (0.02, #666 ), color-stop (1, #222); background-image:-moz-linear-gradient (top, #999, #666 2%, #222); background-image: -o-linear-gradient (top, #999, #666 2%, #222); padding: 0; border-top: 1px solid #444;} [/xhtml]

The Wrapper area is between the header and footer. The element style table is as follows:

 

[Xhtml] # wrapper {position: absolute; z-index: 1; top: 45px; bottom: 48px; left: 0; width: 100%; background: # aaa; overflow: auto ;}# scroller {position: absolute; z-index: 1;/*-webkit-touch-callout: none; */-webkit-tap-highlight-color: rgba (100%, 100%); width:; padding: 0 ;}# scroller ul {list-style: none; padding: 0; margin: 0; width; text-align: left ;}# scroller li {padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid # ccc; border-top: 1px solid # fff; font-size: 14px;} [/xhtml]

So far, a complete listView Web App has been completed. You can view the effect here. The complete code is as follows:

 

[Xhtml] <! DOCTYPE html>

 

4. Pinch & Zoom

If simple scrolling cannot meet application requirements, the list element not only needs to be able to scroll, but also to Zoom in and out. iSroll also provides the Pinch & Zoom method. All you need to do is add the zoom parameter when Scroller declares it.

Var myScroll = new iScroll ('wrapper', {zoom: true });

ZoomMax refers to the maximum allowed magnification. The default value is 4, which can be customized.

For smoother image resizing and scrolling effects, we recommend that you use the CSS-style hardware acceleration performance by adding the following options to all scaled images:-webkit-transform: translate3d (0, 0, 0. Note that using hardware acceleration consumes more computing resources and may cause program crashes.

Complete demo code:

 

[Xhtml] <! DOCTYPE html>

5. Snap to element

You can use the snap option to scroll back and forth between fixed positions, similar to the effect of the marquee. To implement the snap effect, add the corresponding parameters when iScroll is declared. The Code is as follows:

 

 

1	var myScroll = new iScroll('wrapper', { snap: true, momentum: false, hScrollbar: false, vScrollbar: false });

 

Complete demo code:

 

[Xhtml] <! DOCTYPE html>

6. iScrollDetailed parameters:

HScroll is used to lock horizontal scrolling. By default, horizontal and vertical scrolling are supported. If it is set to false, horizontal scrolling is not allowed.

VScroll, used to lock vertical scroll

HScrollbar, whether the horizontal scroll bar is displayed ..

VScrollbar: Specifies whether to display the vertical scroll bar.

Bounce, enable/disable: determines whether a bounce animation exists when the scroll is out of the range ..

Momentum, enable/disable inertia. Default: true. To save computing resources, set it to false.

LockDirection: When an element is rolled in one direction (such as horizontal), the scroll in the other direction (such as vertical) will be locked.