Home > Article > Web Front-end > 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:
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!