github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-18 12:33:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Various iOS scroll improvements (#2548)

Browse Source 
* Don't update scrubber while post pages loading

This alleviates the scrubber bouncing around when scrolling up on iOS

* Throttle loadMore loadPrevious

Throttle loadMore and loadPrevious functions to alleviate skipping over pages and pages of posts during one scroll. This sometimes happens on iOS
This commit is contained in:
Alexander Skvortsov 2021-02-17 10:36:30 -05:00 committed by GitHub
parent 73a8efaec2
commit 09076e005b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/forum/components/PostStream.js
View File

@ -146,12 +146,10 @@ export default class PostStream extends Component {
* @param {Integer} top * @param {Integer} top
*/ */
onscroll(top = window.pageYOffset) { onscroll(top = window.pageYOffset) {
if (this.stream.paused) return; if (this.stream.paused || this.stream.pagesLoading) return;
this.updateScrubber(top); this.updateScrubber(top);
if (this.stream.pagesLoading) return;
this.loadPostsIfNeeded(top); this.loadPostsIfNeeded(top);
// Throttle calculation of our position (start/end numbers of posts in the // Throttle calculation of our position (start/end numbers of posts in the

8
js/src/forum/states/PostStreamState.js
View File

@ -1,3 +1,4 @@
import { throttle } from 'lodash-es';
import anchorScroll from '../../common/utils/anchorScroll'; import anchorScroll from '../../common/utils/anchorScroll';
class PostStreamState { class PostStreamState {
@ -49,6 +50,9 @@ class PostStreamState {
*/ */
this.forceUpdateScrubber = false; this.forceUpdateScrubber = false;
this.loadNext = throttle(this._loadNext, 300);
this.loadPrevious = throttle(this._loadPrevious, 300);
this.show(includedPosts); this.show(includedPosts);
} }
@ -187,7 +191,7 @@ class PostStreamState {
/** /**
* Load the next page of posts. * Load the next page of posts.
*/ */
loadNext() { _loadNext() {
const start = this.visibleEnd; const start = this.visibleEnd;
const end = (this.visibleEnd = this.sanitizeIndex(this.visibleEnd + this.constructor.loadCount)); const end = (this.visibleEnd = this.sanitizeIndex(this.visibleEnd + this.constructor.loadCount));
@ -210,7 +214,7 @@ class PostStreamState {
/** /**
* Load the previous page of posts. * Load the previous page of posts.
*/ */
loadPrevious() { _loadPrevious() {
const end = this.visibleStart; const end = this.visibleStart;
const start = (this.visibleStart = this.sanitizeIndex(this.visibleStart - this.constructor.loadCount)); const start = (this.visibleStart = this.sanitizeIndex(this.visibleStart - this.constructor.loadCount));