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

fix(refresher): translate background content when refreshing (#20378)

Browse Source 
resolves #20377
This commit is contained in:
Liam DeBeasi
2020-02-05 12:17:53 -05:00
committed by GitHub
parent 8983c7006e
commit cf7091625e
2 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/refresher/refresher.tsx
View File

@ -21,6 +21,7 @@ export class Refresher implements ComponentInterface {
private didStart = false;
private progress = 0;
private scrollEl?: HTMLElement;
private backgroundContentEl?: HTMLElement;
private scrollListenerCallback?: any;
private gesture?: Gesture;
@ -394,6 +395,8 @@ export class Refresher implements ComponentInterface {
}
this.scrollEl = await contentEl.getScrollElement();
this.backgroundContentEl = contentEl.shadowRoot!.querySelector('#background-content') as HTMLElement;
if (shouldUseNativeRefresher(this.el, getIonMode(this))) {
this.setupNativeRefresher(contentEl);
} else {
@ -652,12 +655,13 @@ export class Refresher implements ComponentInterface {
this.appliedStyles = (y > 0);
writeTask(() => {
if (this.scrollEl) {
const style = this.scrollEl.style;
style.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : 'translateZ(0px)');
style.transitionDuration = duration;
style.transitionDelay = delay;
style.overflow = (overflowVisible ? 'hidden' : '');
if (this.scrollEl && this.backgroundContentEl) {
const scrollStyle = this.scrollEl.style;
const backgroundStyle = this.backgroundContentEl.style;
scrollStyle.transform = backgroundStyle.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : 'translateZ(0px)');
scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
scrollStyle.overflow = (overflowVisible ? 'hidden' : '');
}
});
}