Mobile Pull-to-Refresh and Pull-Up Loading Effects Mimicking Native Behavior Based on iScroll5 (Original)
Last updated: 2018/11/22 8:54:58 AM
Changelog:Added a mobile rem adaptation plugin.
Release date: 2018-11-22 0:59
Note: This plugin is designed for mobile development. For the best browsing experience, use a mobile phone or the device simulator in your browser's developer tools.
A recent project used iScroll5, so I tried implementing mobile pull-to-refresh and pull-up loading effects. However, I found that no matter what I did, I couldn't perfectly reproduce the native behavior. After carefully inspecting the code, I discovered that when iScroll5 resets the position, if the current Y coordinate is greater than 0, it always scrolls back to 0 and cannot be dynamically configured. So I briefly examined the source code and modified the following sections.
1. Open the iscroll-probe.js file.
2. Find:
1 2 | this.maxScrollX = this.wrapperWidth - this.scrollerWidth; this.maxScrollY = this.wrapperHeight - this.scrollerHeight; |
Change it to:
1 2 3 4 | this.minScrollX = 0; this.minScrollY = 0; this.maxScrollX = this.wrapperWidth - this.scrollerWidth; this.maxScrollY = this.wrapperHeight - this.scrollerHeight; |
3. Find:
1 2 3 4 5 6 7 8 9 10 | if ( !this.hasHorizontalScroll || this.x > 0 ) { x = 0;} else if ( this.x < this.maxScrollX ) { x = this.maxScrollX;}if ( !this.hasVerticalScroll || this.y > 0 ) { y = 0;} else if ( this.y < this.maxScrollY ) { y = this.maxScrollY;} |
Change it to:
1 2 3 4 5 6 7 8 9 10 | if ( !this.hasHorizontalScroll || this.x > 0 ) { x = this.minScrollX;} else if ( this.x < this.maxScrollX ) { x = this.maxScrollX;}if ( !this.hasVerticalScroll || this.y > 0 ) { y = this.minScrollY;} else if ( this.y < this.maxScrollY ) { y = this.maxScrollY;} |
Now, when pulling down, you can dynamically modify the minScrollY property of the instance according to the situation to achieve the desired effect.