Official website: http://iscrolljs.com/
The simplest DOM structure of IScroll:
<div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div>
Initialize iscroll
var myScroll = new IScroll('#wrapper',options);Initialize settings
Initialize settings usage example:
var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true });Settings list:
Belongs to | Attribute name | illustrate | default value |
|---|---|---|---|
Core library croe | options.useTransform | Whether to use the Transform property of CSS3 | true |
options.useTransition | Whether to use the Transition property of CSS3, otherwise use requestAnimationFram instead | true | |
options.HWCompositing | Whether to enable hardware acceleration | true | |
options.bounce | Whether to enable elastic animation effect, turn off to speed up | true | |
Basic Features Basic features | options.click | Whether to enable the click event. It is recommended to turn off this option and enable custom tap events (options.tap) | false |
options.disableMouse | Whether to turn off mouse event detection. If you know which platform to run on, you can enable it to accelerate. | false | |
options.disablePointer | Whether to turn off pointer event detection. If you know which platform to run on, you can enable it to accelerate. | false | |
options.disableTouch | Whether to turn off touch event detection. If you know which platform to run on, you can enable it to accelerate. | false | |
options.eventPassthrough | When using IScroll's horizontal axis to roll, if you want to use the system vertical axis to roll and take effect on the horizontal axis, please turn on. event passthrough demo | false | |
options.freeScroll | It is mainly used when both up, down, left and right scrolling takes effect, and can be scrolled in any direction. 2D scroll demo | false | |
options.keyBindings | Bind key event. Key bindings | false | |
options.invertWheelDirection | Reverse mouse wheel. | false | |
options.momentum | Whether to turn on the startup animation, turn it off to improve efficiency. | true | |
options.mouseWheel | Whether to listen to mouse wheel events. | false | |
options.preventDefault | Whether to block the default event. | true | |
options.scrollbars | Whether to display the default scrollbar | false | |
options.scrollX options.scrollY | You can set whether to display horizontal or vertical scroll bars | scrollX false scrollY true | |
options.tap | Whether to enable custom tap events You can customize the tap event name | false | |
Scrollbar Scrollbars | options.scrollbars | Whether to display the default scrollbar | false |
options.fadeScrollbars | Whether to fade the scrollbar, turn it off to speed up | true | |
options.interactiveScrollbars | Can the user drag the scrollbar | false | |
options.resizeScrollbars | Whether to fix the scroll bar size, it is recommended to enable it when customizing the scroll bar. | false | |
options.shrinkScrollbars | Whether to shrink the scroll bar when scrolling exceeds the scroll boundary. 'clip': Crop the scrollbar beyond 'scale': Scaling scrollbar in proportion (occupies CPU resources) false: no shrinkage, | false | |
options.indicators | Instructs how IScroll should be scrolled, the underlying implementation of Scrollbars. | ||
options.indicators.el | Create a container for scroll bars. The first element in the container is the indicator. For example: indicators: { el: document.getElementById('indicator') } indicators: { el: '#indicator' } | ||
options.indicators.ignoreBoundaries | Whether to ignore container boundaries. Set to true to set the scrolling speed parallelax demo | false | |
options.indicators.listenX options.indicators.listenY | The indicator monitors the scrolling of that direction, which can be set to one direction or two directions. | true | |
options.indicators.speedRatioX options.indicators.speedRatioY | Speed of indicator relative to main scroll bar | 0 | |
options.indicators.fade options.indicators.interactive options.indicators.resize options.indicators.shrink | Settings like scrollbars Minimap demo | ||
options.probeType | Iscroll-probe.js is required to take effect probeType: 1 Triggered when scrolling is not busy probeType: 2 Triggered every certain time when scrolling probeType: 3 Triggered once per pixel scroll | ||
Split page snap | options.snap | Automatically split containers for making the effect of the revolving lanterns, etc. Options.snap:true//Automatically split according to container size Options.snap:el//Segment according to element | false |
Zoom zoom | options.zoom | Whether to turn on zoom It is best to use iscroll-zoom.js If the magnification is blurred, the source container can be defined as 2 times the size, and then scale(0.5) zoom demo | false |
options.zoomMax | Maximum zoom level | 4 | |
options.zoomMin | Minimum zoom level | 1 | |
options.startZoom | Initial scaling level | 1 | |
options.wheelAction | Roller action Set to 'zoom', you can zoom with the scroll wheel | undefined | |
More settings | options.bindToWrapper | Whether to stop scrolling when the cursor or touch exceeds the container | false |
options.bounceEasing | Elastic animation effect Preset effects: 'quadratic', 'circular', 'back', 'bounce', 'elastic' (the last two cannot be expressed through css3) You can also customize the effects bounceEasing: { style: 'cubic-bezier(0,0,1,1)', //css3 fn: function (k) { return k; }//When using requestAnimationFrame, } | 'circular' | |
options.bounceTime | The number of milliseconds of elastic animation lasts | 600 | |
options.deceleration | Rolling momentum deceleration The bigger the faster it is, the recommended price is no more than 0.01 | 0.0006 | |
options.mouseWheelSpeed | Mouse wheel speed | ||
options.preventDefaultException | Lists which elements do not block default events; | {tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } | |
options.resizePolling | Recalculate the IScroll time interval when resizing the window | 60 | |
Key binding | options.keyBindings | Listen to key events to control IScroll For example: keyBindings: { pageUp: 33, pageDown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40 } | |
IScroll5 API:
Belongs to | Method name | illustrate |
|---|---|---|
scroll | scrollTo(x, y, time, easing) | Scroll to: x, y, event, easing method x:int y:int time:int Easing: quadratic | circular | back | bounce | elastic See the IScroll.utils.ease object example: myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic); |
scrollBy(x, y, time, easing) | Scroll to somewhere relative to the current position The rest are the same as above | |
scrollToElement(el, time, offsetX, offsetY, easing) | Scroll to an element. el is the required parameter offsetX/offsetY: Displacement relative to the el element. Set to true to be the center of the screen scroll to element | |
Split page snap | goToPage(x, y, time, easing) | Split the page according to options.snap and jump to a page in landscape or portrait. XY can take effect at the same time. Use in combination with options.snap |
next() prev() | Previous page, next page Use in combination with options.snap | |
Zoom | zoom(scale, x, y, time) | Scaling container Scale: Scaling factor |
refresh | refresh() | Refresh IScroll |
destroy | destroy() | Destroy IScroll and save resources |
IScroll events:
beforeScrollStart | The user clicks on the screen, but has not yet been initialized before scrolling |
|---|---|
scrollCancel | Cancel after initializing the scrolling |
scrollStart | Start scrolling |
scroll | Scrolling |
scrollEnd | Scroll ends |
flick | Tap the left and right screen |
zoomStart | Start scaling |
zoomEnd | End of zoom |
Event usage example:
myScroll = new IScroll('#wrapper'); myScroll.on('scrollEnd', doSomething);Properties of IScroll:
myScroll.x/y | Current location |
|---|---|
myScroll.directionX/Y | The scrolling direction of the last time (-1 down/right, 0 stays original, 1 up/left) |
myScroll.currentPage | Current Snap Information |
myScroll.maxScrollXmyScroll.maxScrollY | myScroll.x/y when scrolling to the bottom |