Iscroll 5 Chinese API

Below, we start the Iscroll tour, please fasten the seat belt.


Iscroll Introduction


Iscroll is a high performance, resource-intensive, non-dependent, multi-platform JavaScript scrolling plugin.


It can work on desktops, mobile devices and smart TV platforms. It has been aggressively optimizing performance and file size to deliver the smoothest experience on old and new devices.


Iscroll is more than just scrolling. It can handle any element that requires the user to interact with the mobile. With only 4kb size iscroll in your project, your project will have scrolling, zooming, panning, infinite Scrolling, parallax scrolling, and rotation. Give it a broom. It can even help you clean the office.

Even if the platform itself provides a good scroll, iscroll can provide even more incredible functionality on this basis. Specifically: fine-grained control of the scrolling position, even during scrolling. You can always get and set the X, Y coordinates of the scroll. Animations can use user-defined erase functions (bounce ' bounce ', flex ' elastic ', rewind ' back ', ... ）。 You can easily attach a large number of custom events (Onbeforescrollstart, * out-of-the-box multi-platform support. From the very old Android device to the latest iphone, from Chrome to Internet Explorer.
version of Iscroll

Optimized for Iscroll. To achieve higher performance, Iscroll is divided into multiple versions. You can choose the version that works best for you.

Currently we have the following versions: Iscroll.js, this version is a regular application script. It contains most of the commonly used functions, with high performance and a very small volume. Iscroll-lite.js, lite version. It does not support fast jump, scroll bar, mouse wheel, accelerator bindings. But if all you need is scrolling (especially on mobile platforms) Iscroll Lite is a small and fast solution. Iscroll-probe.js, probing the current scroll position is a demanding task, which is why I decided to build a dedicated version. If you need to know the scrolling position at any given time, this is iscroll to you. (I am doing more tests, which may end up in regular iscroll.js scripts, please note). Iscroll-zoom.js to increase the zoom function on the standard scrolling feature. Iscroll-infinite.js, you can do unlimited cache scrolling. Handling very long lists of elements for mobile devices is not easy. The Iscroll infinite version uses a caching mechanism that allows you to scroll a potentially infinite number of elements.
Getting Started

Scroll is a class that is initialized for each area that needs to use the scrolling feature. The number of Iscroll instances on each page is not limited to the amount of CPU and memory the device can tolerate.

Keep the DOM structure as concise as possible. Iscroll uses a hardware composition layer but there is an element that restricts what the hardware can handle.
The best HTML structure is as follows:

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

The Iscroll acts on the outer layer of the scrolling region. In the example above, the UL element can be scrolled. Only the first child element of a container element can be scrolled, and the other child elements are completely ignored.

The most basic script is initialized in the following way:

<script type= "Text/javascript" >
    var myscroll = new Iscroll (' #wrapper ');
</script>

* * The first parameter can be a DOM selector string for a scrolling container element **,** can also be a reference object for a scrolling container element * *. The following is a valid syntax:

var wrapper = document.getElementById (' wrapper ');
var myscroll = new Iscroll (wrapper);

So basically you either pass the element directly or pass a queryselector string. Therefore, you can use the CSS name instead of the ID to select a scroll container, as follows:

var myscroll = new Iscroll ('. wrapper ');

Note that Iscroll uses queryselector instead of Queryselectorall, so iscroll only works on the first selector of the selected element. If you need to use Iscroll for multiple objects, you need to build your own looping mechanism. Initialize

Iscroll needs to be initialized when the DOM is ready to be completed. The safest way to do this is to start it * * In the onload event of W**indow.
You can do it in the **domcontentloaded** event or **inline initialization**, and remember that the script needs to know the height and width of the scrolling area. If you have some pictures in the scrolling area causing you not to get the height and width of the area immediately, the Iscroll scrolling size may be wrong * * *.

Adds a position:relative or absolute style to the scrolling container. This resolves an issue in which most of the scroll container size calculations are incorrect.
In summary, the minimum iscroll configuration is as follows:

 
* * NOTE: * * If you have a complex DOM structure, it is best to initialize the Iscroll after the appropriate delay after the OnLoad event. It is best to give the browser 100 or 200 millisecond clearance before initializing the iscroll. parameter Configuration

It can be configured through the second parameter of the constructor during the Iscroll initialization phase.

var myscroll = new Iscroll (' #wrapper ', {
    mousewheel:true,
    scrollbars:true
});
 
The example above illustrates the mouse wheel support and scroll bar support when Iscroll is initialized. Understanding the Core

Iscroll uses a variety of technologies based on device and browser performance to scroll. Usually you do not need to configure the engine, Iscroll will choose the best way for you.

Nevertheless, it is important to understand the Iscroll working mechanism and understand how to configure them.

Options.usetransform

By default, the engine uses the **csstransform** property. If it is still 2007, you can set this property to False, which means that the engine will use the Top/left property to scroll.
This property is useful when the Flash,iframe or video plugin content is perceived by the scroll, but it is important to note that performance can be extremely lossy.
Default value: True

Options.usetransition

Iscroll uses the **css transition** for animation (momentum and elasticity). If set to False, then Requestanimationframe will be used instead.
The difference between the two in the browser now is not obvious. Transitions performs better on older devices. Default value: True

Options. Hwcompositing

This option attempts to change the CSS properties by using **translatez (0) * * To attach the scroll to the hardware layer. On mobile devices This will improve performance, but in some cases you may want to disable it (especially if you have too many elements and hardware performance to keep up).
Default value: True

* NOTE: * * * If the optimal configuration of iscroll is not determined. From a performance standpoint, all of the above options should be set to true. (or better yet, let them automatically set the property to True). You can try this to configure them, but be careful about memory leaks. scroll bar

Scroll bars are not just like the meanings expressed by names, but inside they are references to indicators.

An indicator listens to the position of the scroll bar and realistically its position in the global, but it can do more things.
Let's start with the basics.

Options.scrollbars

As we mentioned in the basic performance introduction, activating a ScrollBar only requires doing one thing, and this is the thing:

var myscroll = new Iscroll (' #wrapper ', {
    scrollbars:true
});
 
Of course, this default behavior can be customized. programming interfaces for scrolling

Of course, you can also use programming to scroll. scrollTo (x, Y, time, easing)

A Iscroll instance, called Myscroll, can be scrolled to any position in the following way:

Myscroll.scrollto (0,-100);
 
Scrolls down by 100 pixels in the way above. Remember: 0 is always the upper left corner. Need to scroll you must pass negative numbers.
Time and easing are optional. They control the scrolling cycle (millisecond level) and the erase effect of the animation.
The erase function is a valid IScroll.utils.ease object. For example, you should do this by applying a one-second classic erase animation:

Myscroll.scrollto (0, -100, IScroll.utils.ease.elastic);
 
The types of erase animations options are: quadratic, circular, back, bounce, elastic. Scrollby (x, Y, time, easing)

Similar to the one above, but you can pass the values of x and Y to scroll from the current position.

Myscroll.scrollby (0,-10);
 
The above statement will scroll down 10 pixels at the current position. If your current position is-100, the position after scrolling ends is-110. scrolltoelement (el, Time, OffsetX, OffsetY, easing)

This is a very useful method and you will like it.
Only one of the mandatory parameters in this method is El. Passing an element or a selector, Iscroll will attempt to scroll to the upper-left corner of the element.
Time is an option that sets the animation period.
OffsetX and OffsetY define the pixel-level offsets, so you can scroll to the element and add a special offset. But that's not the only limit. If you set these two parameters to true, the element will be in the middle of the screen.
The easing parameter is the same as in the Scrollto method. Snap To

The iscroll can be aligned to a fixed position and element.

Options.snap

The simplest alignment configuration is as follows:

var myscroll = new Iscroll (' #wrapper ', {
    snap:true
});
 
This automatically splits the scroll bar according to the size of the page container.
The Snap property can also pass the value of a character type type. This value is the selector of the element to which the scrollbar will be aligned. such as the following:

var myscroll = new Iscroll (' #wrapper ', {
    snap: ' Li '
});
 
In this example, the scrollbar will be aligned to each of the Li-tagged elements.
Here's a quick tour of a series of interesting ways that Iscroll provides for alignment. goToPage (x, Y, time, easing)

X and Y render the number of pages you want to scroll to the horizontal or vertical axis. If you need to use a scroll bar on a single, simply pass the 0 value to the axis you don't need.
The time property is the animation period, and the easing property is the type of erase feature that is used to scroll to the specified point. Please refer to the option.bounceeasing in the advanced features. Both of these properties are optional.

Myscroll.gotopage (10, 0, 1000);
The example above will scroll down to page 10th in a second.

Next ()

Prev ()