feat(content, reorder-group, header, footer, infinite-scroll, refresher): allow custom scroll target

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

The following components are dependent on an implementation using ion-content, which is not compatible in implementations that use a custom scroll container, such as virtual-scroll.

Affected components:

• ion-header - fade effect and large titles (iOS)
• ion-footer - fade effect (iOS)
• ion-infinite-scroll - scrolling
• ion-reorder-group - ability to drag/reorder items
• ion-refresher - ability to pull to refresh

Issue URL: #23437

What is the new behavior?

Developers can make use of a new global CSS class selector: .ion-content-scroll-host to specify to implementations using the above components/features, which container is the scroll target to attach listeners to.

Developers using a custom scroll containers should additionally consider disabling scrolling on the host ion-content to prevent duplicate scroll containers (scroll-y="false" for vertical scrolling and scroll-x="false" for horizontal scrolling).

• ion-header fade effect can be used with a custom scroll container
• ion-header large/collapsible title can be used with a custom scroll container
• ion-footer fade effect can be used with a custom scroll container
• ion-infinite-scroll can be used with a custom scroll container (emitting ionInfinite when the container reaches threshold)
• ion-reorder-group can be used with a custom scroll container (allows reordering elements within target container)
• ion-refresher can be used with a custom scroll container (preserves iOS and MD animation effects without needing to specify a custom #background-content element)

All of the above features can be used against virtual scroll implementations.

Does this introduce a breaking change?

• Yes
• No

Other information

There were many areas of the implementation that were lacking e2e coverage of functionality, the following components had tests filled in, to cover the behavior changed with this PR: ion-infinite-scroll, ion-refresher, ion-footer (fade effect is exclusive to iOS).

[sean-perkins]

@tlaverdure I wanted to update you on the status of this PR, based on decisions the team has discussed privately.

The changes for querying that would support detaching from ion-content, ended up conflicting with existing Dx patterns we have implemented for ion-refresher, to require it to be used inside of slot="fixed". Changing this behavior would be a breaking change and could also result in incorrect implementations of ion-refresher (specifically the iOS pull to refresh animation).

As such, I have removed the referenced issue for the webkit performance bug. With reviewing that issue, there are a few items that stand out to me:

1. The performance overhead is an issue that Webkit will have to address with ShadowDOM.
2. The reproduction use case does not use virtual scroll, a feature that could not fully be taken advantage of prior to this active PR.

I would be happy to test virtual scroll against your reproduction to see if there are noticeable performance improvements that you can taken advantage of in the interim.

I apologize for committing to handling your use case and the end result not addressing it. We will continue to evaluate improvements we can make that would incrementally improve the performance without causing a breaking change (or hold a larger improvement for v7).

Thanks for your willingness to test this PR and your continued time in improving Ionic!

[liamdebeasi]

Please be sure to also update the Virtual Scroll docs:

Vue: https://github.com/ionic-team/ionic-docs/blob/main/docs/vue/virtual-scroll.md#a-note-on-ionic-components
Angular: https://github.com/ionic-team/ionic-docs/blob/main/docs/angular/virtual-scroll.md#a-note-on-ionic-components
React: https://github.com/ionic-team/ionic-docs/blob/main/docs/react/virtual-scroll.md#a-note-on-ionic-components

(In particular, the "A Note on Ionic Components" section)

[liamdebeasi]

Good to merge once the other 4 points have been addressed. Great job on this 👍

[liamdebeasi]

One more thing: Please make sure you update the commit subject to be more descriptive.

Maybe something like add custom scroll target to improve compatibility with virtual scroll?

[sean-perkins]

PR to update the docs for virtual scrolling will be tracked here: ionic-team/ionic-docs#2229

[mariusbolik]

Hi @sean-perkins, thank you for the good work! Is there a dev build or any other way to test this feature?