MOBILE-4470 core: Fix collapsible header scrolling

There were some scenarios were the scrollingHeight was recalculated, but the listeners weren't using the latest value and thus causing the wrong behaviour.
main
Noel De Martin 2024-05-22 10:49:19 +02:00
parent e8457e89d7
commit 1756a19f66
1 changed files with 2 additions and 7 deletions

View File

@ -512,9 +512,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
this.content = content;
const page = this.page;
const scrollingHeight = this.scrollingHeight;
const expandedHeader = this.expandedHeader;
const expandedHeaderHeight = this.expandedHeaderHeight;
const expandedFontStyles = this.expandedFontStyles;
const collapsedFontStyles = this.collapsedFontStyles;
const floatingTitle = this.floatingTitle;
@ -522,9 +520,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
if (
!page ||
!scrollingHeight ||
!expandedHeader ||
!expandedHeaderHeight ||
!expandedFontStyles ||
!collapsedFontStyles ||
!floatingTitle
@ -543,7 +539,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
this.content.scrollEvents = true;
this.content.addEventListener('ionScroll', this.contentScrollListener = ({ target }: CustomEvent<ScrollDetail>): void => {
if (target !== this.content || !this.enabled) {
if (target !== this.content || !this.enabled || !this.scrollingHeight) {
return;
}
@ -551,7 +547,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
const progress = frozen
? 0
: CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
: CoreMath.clamp(contentScroll.scrollTop / this.scrollingHeight, 0, 1);
this.setCollapsed(progress === 1);
page.style.setProperty('--collapsible-header-progress', `${progress}`);
@ -608,7 +604,6 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
const scrollingHeight = this.scrollingHeight ?? 0;
const expandedHeaderClientHeight = this.expandedHeader?.clientHeight ?? 0;
const expandedHeaderHeight = this.expandedHeaderHeight ?? 0;
const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight;
let frozen = false;