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

fix(refresher): prevent clearing virtual scroll overflow styling (#26613)

Browse Source 
Resolves #26553
This commit is contained in:
Sean Perkins
2023-02-02 13:20:03 -05:00
committed by GitHub
parent 54cd571acd
commit 9d6ec2925c
2 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,6 +39,7 @@ export class Refresher implements ComponentInterface {
private backgroundContentEl?: HTMLElement; private backgroundContentEl?: HTMLElement;
private scrollListenerCallback?: () => void; private scrollListenerCallback?: () => void;
private gesture?: Gesture; private gesture?: Gesture;
private overflowStyles?: { [key: string]: string };
private pointerDown = false; private pointerDown = false;
private needsCompletion = false; private needsCompletion = false;
@ -566,6 +567,7 @@ export class Refresher implements ComponentInterface {
private onStart() { private onStart() {
this.progress = 0; this.progress = 0;
this.state = RefresherState.Inactive; this.state = RefresherState.Inactive;
this.memoizeOverflowStyle();
} }
private onMove(detail: GestureDetail) { private onMove(detail: GestureDetail) {
@ -710,7 +712,7 @@ export class Refresher implements ComponentInterface {
this.setCss(0, '0ms', false, ''); this.setCss(0, '0ms', false, '');
}, 600); }, 600);
// reset set the styles on the scroll element // reset the styles on the scroll element
// set that the refresh is actively cancelling/completing // set that the refresh is actively cancelling/completing
this.state = state; this.state = state;
this.setCss(0, this.closeDuration, true, delay); this.setCss(0, this.closeDuration, true, delay);
@ -729,11 +731,37 @@ export class Refresher implements ComponentInterface {
scrollStyle.transform = backgroundStyle.transform = y > 0 ? `translateY(${y}px) translateZ(0px)` : ''; scrollStyle.transform = backgroundStyle.transform = y > 0 ? `translateY(${y}px) translateZ(0px)` : '';
scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration; scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay; scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
scrollStyle.overflow = overflowVisible ? 'hidden' : ''; if (overflowVisible) {
scrollStyle.overflow = 'hidden';
} else {
this.restoreOverflowStyle();
}
} }
}); });
} }
private memoizeOverflowStyle() {
if (this.scrollEl) {
const { overflow, overflowX, overflowY } = this.scrollEl.style;
this.overflowStyles = {
overflow: overflow ?? '',
overflowX: overflowX ?? '',
overflowY: overflowY ?? '',
};
}
}
private restoreOverflowStyle() {
if (this.overflowStyles !== undefined && this.scrollEl !== undefined) {
const { overflow, overflowX, overflowY } = this.overflowStyles;
this.scrollEl.style.overflow = overflow;
this.scrollEl.style.overflowX = overflowX;
this.scrollEl.style.overflowY = overflowY;
this.overflowStyles = undefined;
}
}
render() { render() {
const mode = getIonMode(this); const mode = getIonMode(this);
return ( return (

3
core/src/components/refresher/test/scroll-target/index.html
View File

@ -27,7 +27,6 @@
#inner-scroll { #inner-scroll {
height: 100%; height: 100%;
overflow-y: auto;
} }
</style> </style>
</head> </head>
@ -45,7 +44,7 @@
<ion-refresher-content></ion-refresher-content> <ion-refresher-content></ion-refresher-content>
</ion-refresher> </ion-refresher>
<div id="content"> <div id="content">
<div id="inner-scroll" class="ion-content-scroll-host"> <div id="inner-scroll" class="ion-content-scroll-host" style="overflow-y: auto">
<ion-list id="list"></ion-list> <ion-list id="list"></ion-list>
</div> </div>
</div> </div>