Tips Front End Mobile web Iscroll 5 self-translation API quick Check

Iscroll can do.

1, simulate the elements of the native iOS or Android device scrolling, the app's kind of smooth scrolling, just use a light-weight JS library implementation (even more cool visual experience)

2, mobile phone popular drop-down refresh, Ajax asynchronous loading infinite scrolling parallax scrolling, etc.

3. Also can do the horizontal direction of the carousel, gesture swipe, by capturing the DOM elements paged display

...

Initializing the Initialize to initialize the Visual area container to scroll the content is recommended to use the simplest possible DOM structure,
That

 1  <div id= " wrapper   >2  <div class  = the_container here is a container for finger-sliding content areas   >...</div>3  <div Span style= "color: #0000ff;" >class  = the_container2 this div and its contents will be Iscorll ignored   " ></div>4  </div> 

1 <script type= "Text/javascript" >2       varnew iscroll (' #wrapper '); 3 </script>

Note

The init script only cares about the first child element under wrapper and treats it as a scrollable element
But a page wrapper element itself can have multiple such as using #wrapper #wrapper2. Wrapper selector Initializes the container to support such multiple scrolling regions

The relevant configuration parameters of the Iscroll can be passed in the initialization method through the second object parameter
Such as:

1  var New Iscroll (' #wrapper ', {2       true,3       true4   });

You can also use the options object settings of its instance after initialization
Such as:

1 myScroll.options.xxx

Iscroll Related methods:

Scroll to any position scrollTo (x, Y, time, easing)
Such as:

     Myscroll.scrollto (0, -100);  // roll down 100 pixels

Note
Easing animation effects (optional) Use the effects defined under the Scroll.utils.ease object (quadratic, circular, back, bounce, elastic (elastic Scrolling))
Time-consuming (optional)

Such as:

Myscroll.scrollto (0, -100, IScroll.utils.ease.elastic);

Scrollby (x, Y, time, easing) This method is basically the same as above, but X, Y is relatively positioned (relative;)


Scroll to the specified element location.

Scrolltoelement (EL, Time, OffsetX, OffsetY, easing)

Such as:

1 myscroll.scrolltoelement (document.queryselector (' #scroller li:nth-child ()) "  //Scroll to the 10th element ( 10th element at the top of wrapper)23  myscroll.scrolltoelement (document.queryselector (' #scroller Li:nth-child '), NULL, NULL, TRUE);  Scroll 25th Element (second element in wrapper middle)45   myscroll.scrolltoelement (' # Document.queryselector Scroller Li:nth-child (()), x, NULL, NULL, IScroll.utils.ease.elastic)//scroll to 50th element

Separate scrolling content area (snap element) (a feature of Iscroll, highlights)
Options.snap Optional snap:true snap: ' Li '
Such as:

var myscroll = new Iscroll (' #wrapper ', {    snap: ' Li '});

Note

After capturing the element, there is a series of interesting methods available

GoToPage (x, Y, time, easing) x y is defined for horizontal and vertical axes
Such as:

  Myscroll.gotopage (10, 0, 1000); Turn 10 pages in the horizontal direction within one second

Next () prev ()   //page flipping based on current position

Remember that you should introduce iscroll-zoom.js (zoom)

1 false ) set to True2 options.zoommax  (default 4)3 options.zoommin  (default 1) 4 options.zoomstart (default 1)5options.wheelaction  (default undenfined) can be set to Z Oom instead of the default scrolling function is scaled to 6 Zoom (scale, x, Y, time)  x y defines the center of the scroll based, not set the milliseconds that will be executed based on the center time of the screen

Refreshing refresh ()
The Ajax callback handler sets the delay (since adding a new DOM element Iscroll requires a bit of recalculation and then the page renders the time)

SetTimeout (function () {Myscroll.refresh ();}, 0);  (The official opinion is that this wait time, even if it is added to a 0 is not more than the increase)

Destroy Destroy ()

1 Myscroll.destroy (); 2 null;  // use these two lines of code to free the memory that Iscroller occupies when it is no longer in use

Available events:
Beforescrollstart
Scrollcancel
Scrollstart
Scroll Note: Event monitoring in scrolling is only supported with Probe.js version of Iscroll 5
Scrollend
Flick
Zoomstart
Zoomend

Registering Events (on (type, FN)) such as:

1 New Iscroll (' #wrapper '); 2 function (){});

Available properties:
myscroll.x/y Current Location

myscroll.directionx/y last Scroll direction (-1 down/right, 0 remains intact, 1 up/left)

Myscroll.currentpage Current Snap Information

MyScroll.maxScrollXmyScroll.maxScrollY when scrolling to the bottom myscroll.x/y

Core technologies used by Iscroll:

CSS3 's transform (2d,3d conversion) transform has four common methods: Rotate rotate (), zoom scale (), move translate (), tilt skew ()
　

Note
Iscroll Enable/disable transform via options.usetransform
(The default is true, if set to False, the official document says you'll feel like you're back in 2007 years, because CSS doesn't have transform technology at that time)
Because the top left is used on IE, the scroller (the first child element of wrapper, the container of all scrolling content area) needs to be set to Position:absolute;

CSS3 Transition (Transition) the element changes from one style to another over a period of time
Iscroll using transition technology to perform CSSS3 animation (animation)
Mainly two pre-defined animation momentum (drag inertia) and bounce (over bounce)

Set to False to replace the Requestanimationframe will be executed

options. Hwcompositing
Use hardware acceleration (the default is true, if you need more emphasis on stability can be turned off, can reduce the chance of XXX unexpectedly stop on the phone)

options.bounce (default = True)
Set false individually to disable over bounce

Options.Click (default = False)
Iscorll Some default behaviors for scrolling regions, such as click events, are disabled by default
If you want your script to respond to a click event in the scrolling area can be set to true to turn on response click event
Officially recommended mobile phones do not use Click events instead of tap events that use touch behavior, because execution is much more efficient


Options.disablemouse

Options.disablepointer

Options.disabletouch (default false)
Note

Iscroll, by default, monitors the mouse pointer finger-touch events to be compatible with PC tablet mobile, but they also feel that this is a waste of memory,
So it's recommended that if you have a clear target device, disable unnecessary monitoring to improve efficiency.

Options.eventpassthrough (default false)
Sometimes you have to use both vertical scrolling and horizontal scrolling to set this value to True
or set to ' horizontal ' will be replaced (iscroll vertical scrolling or native horizontal scrolling)

Options.freescroll (default false)
This option is mainly useful when scrolling in 2d when your scrolling area is both horizontal and vertical scrolling
But the effect doesn't feel good, like the kind of drag-and-drop feeling that you use with maps.


options.keybindings (default false)
Activating keyboard Reception

options.invertwheeldirection (default false)
Reverses the mouse direction, provided the support mouse wheel

options.momentum (default true)
Set whether drag inertia is enabled


Options.mousewheel (default false)
Whether to monitor mouse events


Options.preventdefault (default true)
The authorities warn you, unless you really understand what you're doing, don't go blind.

Options.scrollbars (default false)
Show or not show scroll bars

Options.scrollx (default false)
options.scrolly (default ture)
Default only vertical scrolling, if you need to scroll horizontally you need to set SCROLLX to True
Can be used as needed to open a one-off

options.startx Options.starty (default 0)
Default scroller (content area) in the upper-left corner of wrapper (0,0) position you can set this initial position

Options.tap (default false)
Set this option to Iscroll still be able to hear when the user clicks on a tap event without scrolling

The standard increase in the Listener event code is

1  false ); \ \ Native JS (Native)2  $ (' #element '). On (' tap ', dosomething); \ \ (jquery syntax)

Options.fadescrollbars (default false)
When set to true, the fade-out scroll bar is enabled (the scrollbar is automatically hidden when not scrolling)

Options.interactivescrollbars (default false)
Draggable scroll bar

Options.resizescrollbars (default true)
The size of the scrollbar is based on the width of the wrap/scroller height

Options.shrinkscrollbars (default false)
The value of ' clip ' scale can be set
After setting the scroll bar to a little bit shorter when the scrolling area exceeds

Options.bindtowrapper (default false)
By default scrolling your finger when you leave the scrolling content area will still scroll through the content, which is usually useful but you can also keep your mouse or finger snooping out of the document.
Instead of just binding to wrapper, leaving the scrolling area will no longer scroll

options.bounceeasing (default circular)

Note
can be set (animation beyond bounce) ' quadratic ', ' circular ', ' back ', ' bounce ', ' elastic '
If you don't want to have several effects above, you also support customizing individual animations in the following way

1 bounceeasing: {2       style: ' Cubic-bezier (0,0,1,1) ',3       function return K;} 4   }

options.bouncetime (default)
The execution time of the bounce animation (in milliseconds)

options.deceleration (default 0.0006)
Drag the inertia of the deceleration option value the greater the execution time is shorter if you want to change the recommended choice is 0.01,
It's a little bit bigger than that, and basically it doesn't feel like a slow motion with drag inertia.

options.mousewheelspeed (default)
Set the speed of the mouse wheel (this is not a good description, specifically to set how quickly to change the value of their own to try to know)

options.preventdefaultexception (Default {tagName:/^ (input| textarea| button| SELECT) $/})

If you do not want to prevent the browser from being disabled by default on all elements such as the move of the jump page of the point a tag
This can be set: preventdefaultexception: {className:/(^|\s) FormField (\s|$)/}


options.resizepolling (default)
When you change the browser window size (for example, the PC browser mouse dragged the window size), Iscroll need to recalculate location and size
The polling interval that is recalculated after this change is 60 milliseconds

Tips Front End Mobile web Iscroll 5 self-translation API quick Check