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