javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(scroll): merge into ion-content

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-10 00:00:18 +02:00
parent a4571bfa4f
commit 997cda0667
31 changed files with 548 additions and 912 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@ -8,7 +8,7 @@ export class InfiniteScroll {
private thrPx = 0;
private thrPc = 0;
private scrollEl?: HTMLIonScrollElement;
private scrollEl?: HTMLElement;
private didFire = false;
private isBusy = false;
@ -81,9 +81,13 @@ export class InfiniteScroll {
}
this.thresholdChanged(this.threshold);
this.enableScrollEvents(!this.disabled);
if (this.position === 'top') {
this.queue.write(() => this.scrollEl && this.scrollEl.scrollToBottom(0));
}
// if (this.position === 'top') {
// this.queue.write(() => {
// if (this.scrollEl) {
// this.scrollEl.scrollTop = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
// }
// });
// }
}
componentDidUnload() {
@ -143,45 +147,45 @@ export class InfiniteScroll {
}
this.isLoading = false;
if (this.position === 'top') {
/**
* New content is being added at the top, but the scrollTop position stays the same,
* which causes a scroll jump visually. This algorithm makes sure to prevent this.
* (Frame 1)
* - complete() is called, but the UI hasn't had time to update yet.
* - Save the current content dimensions.
* - Wait for the next frame using _dom.read, so the UI will be updated.
* (Frame 2)
* - Read the new content dimensions.
* - Calculate the height difference and the new scroll position.
* - Delay the scroll position change until other possible dom reads are done using _dom.write to be performant.
* (Still frame 2, if I'm correct)
* - Change the scroll position (= visually maintain the scroll position).
* - Change the state to re-enable the InfiniteScroll.
* - This should be after changing the scroll position, or it could
* cause the InfiniteScroll to be triggered again immediately.
* (Frame 3)
* Done.
*/
this.isBusy = true;
// ******** DOM READ ****************
// Save the current content dimensions before the UI updates
const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
// if (this.position === 'top') {
// /**
// * New content is being added at the top, but the scrollTop position stays the same,
// * which causes a scroll jump visually. This algorithm makes sure to prevent this.
// * (Frame 1)
// * - complete() is called, but the UI hasn't had time to update yet.
// * - Save the current content dimensions.
// * - Wait for the next frame using _dom.read, so the UI will be updated.
// * (Frame 2)
// * - Read the new content dimensions.
// * - Calculate the height difference and the new scroll position.
// * - Delay the scroll position change until other possible dom reads are done using _dom.write to be performant.
// * (Still frame 2, if I'm correct)
// * - Change the scroll position (= visually maintain the scroll position).
// * - Change the state to re-enable the InfiniteScroll.
// * - This should be after changing the scroll position, or it could
// * cause the InfiniteScroll to be triggered again immediately.
// * (Frame 3)
// * Done.
// */
// this.isBusy = true;
// // ******** DOM READ ****************
// // Save the current content dimensions before the UI updates
// const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
// ******** DOM READ ****************
this.queue.read(() => {
// UI has updated, save the new content dimensions
const scrollHeight = scrollEl.scrollHeight;
// New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
const newScrollTop = scrollHeight - prev;
// // ******** DOM READ ****************
// this.queue.read(() => {
// // UI has updated, save the new content dimensions
// const scrollHeight = scrollEl.scrollHeight;
// // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
// const newScrollTop = scrollHeight - prev;
// ******** DOM WRITE ****************
this.queue.write(() => {
scrollEl.scrollTop = newScrollTop;
this.isBusy = false;
});
});
}
// // ******** DOM WRITE ****************
// this.queue.write(() => {
// scrollEl.scrollTop = newScrollTop;
// this.isBusy = false;
// });
// });
// }
}
/**