How to use the mobile plug-in IScroll.js

We know that the IScroll.js plug-in is compatible with all mobile scroll bar events. In some Android machines, we cannot operate the scroll bar through overflo:scroll; but IScroll.js can indeed be placed in a safe container element. To handle scrolling, I will give you a detailed introduction to IScroll.js.

Note

When using IScroll.js, you must have three levels of element nesting, such as:

<div class="food-left">
    <ul class="food-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul></div>

The outermost food-left must have two css styles : position:relative; and overflow:hidden.

Initialization

IScroll.js exposes us an IScroll constructor;
As follows, we initialize

<script type="text/javascript">
      leftScroll = new IScroll(".food-left");</script>

In the constructor The actual parameters passed in are consistent with the new querySelector parameter in ES6; in fact, querySelector is used in the same way as our jQuery selector;
Note: We must initialize it after the DOM structure is loaded, otherwise it will be invalid.

Settings

IScroll.js allows us to pass in the second parameter to configure the properties of the scroll event;

leftScroll = new IScroll(".food-left", {
       scrollbars: true,
       bounce: false,
       mouseWheel:true,
       click:true});

Scroll bar

scrollbars: true

Whether to display scrolling strip. The default is false;

fadeScrollbars:true

The scroll bar fades in and out, of course provided that your scroll bar is displayed. The default is false;

interactiveScrollbars

Whether to drag the scroll bar. The default is false;

resizeScrollbars

The length of the scroll bar is set proportionally. If you want a fixed size, you can set it to flase;The default is true;

bounce: false

Scroll Whether to perform a bounce animation when reaching the container boundary. The default is true;

mouseWheel:true

Whether to display enabled mouse scrolling; the default is false;

invertWheelDirection

Whether to enable reverse scrolling after activating mouse scrolling; the default is false;

click:true

iScroll prohibits the default mouse click behavior. If you want to use the setting true; the default is false;

disableMouse、disablePointer、options.disableTouch

IScrol listens to all pointer events by default. If you confirm the platform where the project is positioned , you can disable unused effects to reduce resource usage; the default is false;

startX、startY

Set the initial offset position of the scroll bar; the default is none;

Method

IScroll.js also provides us with some convenient methods, of course they are all under the instance object;

rightScroll.scrollToElement(el, time, offsetX, offsetY, easing)

Scroll to the position of the incoming element, which must be a native DOM object;Then comes the scrolling time;

scrollTo(x, y, time, easing)

You can scroll to any position, the default position is 0, if you want to move, you need to set a negative number;

I believe after reading these You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to use xml2js in nodej

Detailed explanation of the path module of node.js

The above is the detailed content of How to use the mobile plug-in IScroll.js. For more information, please follow other related articles on the PHP Chinese website!