summary
This version of iScroll 4 completely rewrites the original code of the iScroll framework. This project was created entirely because of the widespread use of mobile webkit browsers (such as iPhone, iPad, Android)
A localized way to slide the content of an element that defines height and width is provided. Unfortunately, in this case, all web applications' pages cannot contain a header, end of page or a scrollable content with position:absolute.
Middle area.
However, the latest revision of Android system can already support this feature (although the support is not particularly good), and Apple seems reluctant to apply the one-finger slide event to the div element.
In addition to the features of previous versions of iScroll, iScroll 4 also includes the following features:
(1) Zoom (Pinch/Zoom)
(2) Pull up/down to refresh
(3) Speed and performance improvement
(4) Accurately capture elements
(5) Custom scrollbar
Friendly tips: iScroll 4 is not a simple alternative to iScroll 3, and the API documentation is already different. Also considering that this version is in beta, some APIs may have minor changes.
User Guide
In this document you will find many examples to teach you how to quickly get started with the iScroll script library. It may be a bit boring to refer to the demo example in the article and read this document carefully, but this article is the essence of the script library iScroll.
iScroll needs to initialize the elements to be scrolled, and does not limit the number of elements using iScroll in a page (your hardware configuration is not considered here). The type and length of content in the scroll element will affect the iScroll script library to a certain extent
The number of elements that can be used simultaneously.
When using iScroll script library, the structure of the DOM tree should be simple enough to remove unnecessary tags and try to avoid excessive nesting of tags.
The optimal structure of using iScroll is as follows:
<div id="wrapper"> <ul> <li></li> ...... </ul></div>
In this small example, the ul tag will be scrolled. iScroll must be connected to the wrapper outside the scrolling content to produce results.
【Precautions】:
Only the first child element in the wrapper can be scrolled. If you want more elements to scroll, then you can try the following writing method:
<div id="wrapper"> <div id="scroller"> <ul> <li></li> ... </ul> <ul> <li></li> ... </ul> </div></div>
In this example, the scroller element can be scrolled even if it contains two ul elements
iScroll must be instantiated before calling, you can instantiate iScroll in the following cases:
(1) Use the onDOMContentLoaded event to achieve scrolling
Suitable for scrolling content only contains text and pictures, and all pictures have fixed sizes
<script src="iscroll.js"></script> <script> var myscroll; function loaded(){ myscroll=new iScroll("wrapper"); } window.addEventListener("DOMContentLoaded",loaded,false); </script>Note: myscroll variable is global, so you can call it anywhere
(2) Use the onLoad event to achieve scrolling
Because the DOMContentLoaded event will be called after loading the DOM structure, the length and width of the scrolling area may not be determined before elements such as images are not loaded. At this time, the onLoad event can be implemented.
<script src="iscroll.js"><script> <script> var myscroll; function loaded(){ setTimeout(function(){ myscroll=new iScroll("wrapper"); }, 100 ); } window.addEventListener("load",loaded,false); </script>In this case, iScroll will be initialized after the page resources (including pictures) are loaded 100ms. This should be a relatively safe way to call iScroll.
(3) Initialization of inline
This situation will be called when the page is loaded into JS. This method is not recommended, but many JavaScript bigwigs are using this method. What reason do I have to disagree?
<script src="iscroll.js"></script> <div id="wrapper"> <ul> <li></li> ... </ul> </div> <script> var myscroll=new iScroll("wrapper"); </script>However, it is recommended that you use some framework ready methods to safely call iScroll (such as ready() in jquery).
Parameters passed in iScroll
The second parameter in iScroll allows you to customize some content, such as the following code:
<script>var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});</script>The second parameter is usually an object. For example, the scroll bar is not displayed in the above example. Commonly used parameters are as follows:
hScroll false prohibits horizontal scrolling true horizontal scrolling default to true
vScroll false refined vertical scroll true vertical scroll default to true
hScrollbar false hides scrollbars in horizontal direction
vScrollbar false Hide scrollbar in vertical direction
fixedScrollbar On iOS system, when element dragging exceeds the scroller's boundary, the scrollbar shrinks. Set to true to prevent the scrollbar from exceeding the scroller.
The visible area of the scroller. Default is true on Android and false on iOS
fadeScrollbar false Specifies to hide scrollbars when there is no fading effect
hideScrollbar hides scrollbar when there is no user interaction default to true
bounce Enable or disable bounce of boundaries, default to true
momentum enables or disables inertia, defaults to true, this parameter is very useful when you want to save resources.
lockDirection false cancels locking of the drag direction, true drag can only be in one direction (up/down or left/right)
Achievement of various effects
Scroll refresh 'Pull to refresh' demo
This effect has become very popular since Twitter and some Apple local apps have appeared. You can take a look here.
In the latest version, the author separates the "pull to refresh" part as an additional plug-in for iScroll. You can click here to see how pull to refresh works. All you need to do is customize the pullDownAction() method. You may need ajax to load new content, but remember to call refresh once the DOM tree changes. It should be remembered that in the example we added a 1 second delay to simulate the network's delay effect. Of course, if you don't want to use this delay, just remove the setTimeout method.
Zoom (pinch / zoom) 'Pull to refresh' demo
We have to face the fact that just rolling is actually nothing new. This is why in this version of iScroll 4 we allow you to put it
Large and shrink. To want this function, you only need to set the zoom parameter to true to use gestures to zoom in and out. You can take a look here.
The double-click to zoom in and out is also supported in iScroll 4. To use the zoom function, you need at least the following configuration:
var myScroll =new iScroll("wrapper",{zoom:true});
If you want to customize the zoom function in depth, you can use some of the following options:
zoomMax specifies the maximum multiple that allows magnification, default is 4
[Notes]: If you want the image scaling to be effective, you should put them in the hardware synthesis layer. In layman's terms, it is to use -webkit-transform:translate3d(0,0,0) on all img elements that need to be scaled. And it is particularly important that hardware acceleration will take up a lot of resources and should be used with caution, otherwise your application may crash.
snap and snap to element 'Carousel' demo
The SNAP function is to determine whether the element slides to the specified position. This effect allows you to create a fancy marquee effect.
The plug-in will automatically analyze elements of the same label or the same size in the scrolling area as the capture object, and you can also specify the captured object through parameters.
var myscroll=new iScroll("wrapper",{ snap:true, momentum:false, hScrollbar:false, vScrollbar:false });You can set the snap object by setting the snap parameter to the specified tag. For example, capture the li tag.
var myscroll=new iScroll("wrapper",{ snap:"li", momentum:false, hScrollbar:false, vScrollbar:false });In this example, the scroller can capture the upper left-most li element in the scrolling area
Custom scrollbars
In iScroll 4, a series of css can be used to customize the rendering of scrollbars. You can add a class parameter to the scroll bar, as follows:
var myscroll=new iScroll("wrapper",{ scrollbarClass: "myScrollbar"});It should be noted that the scroll bar is composed of two elements: the container and the display. The container is the same height as the wrapper, while the display represents the scrollbar itself.
The HTML structure of the scroll bar is as follows:
<div><div></div></div>.myscrollbarV{position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px; }.myScrollbarV > div {position:absolute;z-index:100;width:100%; /* The following is probably what you want to customize */background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));border:1px solid #800;-webkit-background-clip:padding-box;-webkit-box-sizing:border-box;-webkit-border-radius:4px;-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5); }General method:
(1) Refresh This method should be called when the DOM tree changes
eg: setTimeout(function () { myScroll.refresh(); }, 0);
(2) iScroll also provides three methods: scrollTo, scrollToElement and scrollToPage, so that you can control the scrolling effect through javascript.
scrollTo(x, y, time, relative): Let the content scrollbar x/y position within the specified time. For example, myScroll.scrollTo(0, -100, 200) scrolls downward by 100 pixels in 200 milliseconds. myScroll.scrollTo(0, 10, 200, true) can achieve the effect of scrolling 10 pixels on the Y-axis within 200 milliseconds relative to the current position.
scrollToElement(element, time): Scroll to the specified element within the specified time. For example, myScroll.scrollToElement('li:nth-child(10)', 100) scrolls to the position of the 10th li element within 100 milliseconds. The first parameter can be used to filter elements with the selector in CSS3.
snapToPage(pageX, pageY, time): Scroll from page 1 to page 2 in 200 milliseconds (0 represents page 1, 1 represents page 2). This function can be called when using the SNAP function.
(3) detroy() completely eliminates myscroll and its memory space occupied
eg: myscroll.destroy();
myScroll = null;
The development direction of iScroll
Form domain support
Scaling optimization
Better desktop browser compatibility
Optimization of onScrol event
Changes in adding a hash value
Automatic refresh after DOM changes