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): set overflow styles when using custom scroll target (#27058)

Browse Source 
* bug(refresher): set overflow styles when using custom scroll target

* bug(refresher): set overflow styles when using custom scroll target

* Apply suggestions from code review

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

* Add comment

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Shawn Taylor
2023-04-04 12:04:50 -04:00
committed by GitHub
parent 5e35bfc955
commit adbb50ca5b
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -354,7 +354,10 @@ export class Refresher implements ComponentInterface {
this.state = RefresherState.Pulling; this.state = RefresherState.Pulling;
writeTask(() => this.scrollEl!.style.setProperty('--overflow', 'hidden')); // When ion-refresher is being used with a custom scroll target, the overflow styles need to be applied directly instead of via a css variable
const { scrollEl } = this;
const overflowProperty = scrollEl!.matches(ION_CONTENT_CLASS_SELECTOR) ? 'overflow' : '--overflow';
writeTask(() => scrollEl!.style.setProperty(overflowProperty, 'hidden'));
const animationType = getRefresherAnimationType(contentEl); const animationType = getRefresherAnimationType(contentEl);
const animation = createPullingAnimation(animationType, pullingRefresherIcon, this.el); const animation = createPullingAnimation(animationType, pullingRefresherIcon, this.el);
@ -378,7 +381,10 @@ export class Refresher implements ComponentInterface {
this.gesture!.enable(false); this.gesture!.enable(false);
writeTask(() => this.scrollEl!.style.removeProperty('--overflow')); const { scrollEl } = this;
const overflowProperty = scrollEl!.matches(ION_CONTENT_CLASS_SELECTOR) ? 'overflow' : '--overflow';
writeTask(() => scrollEl!.style.removeProperty(overflowProperty));
if (this.progress <= 0.4) { if (this.progress <= 0.4) {
ev.data.animation.progressEnd(0, this.progress, 500).onFinish(() => { ev.data.animation.progressEnd(0, this.progress, 500).onFinish(() => {
this.animations.forEach((ani) => ani.destroy()); this.animations.forEach((ani) => ani.destroy());