fix(refresher): refresher is visible with multiple custom scroll targets (#25750)

Resolves #25495
This commit is contained in:
Sean Perkins
2022-08-15 14:58:38 -04:00
committed by GitHub
parent f47c5de1e6
commit e750e33616
3 changed files with 22 additions and 14 deletions

View File

@ -28,6 +28,7 @@ export class Content implements ComponentInterface {
private cTop = -1;
private cBottom = -1;
private scrollEl?: HTMLElement;
private backgroundContentEl?: HTMLElement;
private isMainContent = true;
// Detail is used in a hot loop in the scroll event, by allocating it here
@ -188,6 +189,18 @@ export class Content implements ComponentInterface {
return Promise.resolve(this.scrollEl!);
}
/**
* Returns the background content element.
* @internal
*/
@Method()
async getBackgroundElement(): Promise<HTMLElement> {
if (!this.backgroundContentEl) {
await new Promise((resolve) => componentOnReady(this.el, resolve));
}
return Promise.resolve(this.backgroundContentEl!);
}
/**
* Scroll to the top of the component.
*
@ -332,7 +345,7 @@ export class Content implements ComponentInterface {
'--offset-bottom': `${this.cBottom}px`,
}}
>
<div id="background-content" part="background"></div>
<div ref={(el) => (this.backgroundContentEl = el)} id="background-content" part="background"></div>
<TagType
class={{
'inner-scroll': true,