diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md index 81389f5a4f5..0150d810162 100644 --- a/docs/angular/virtual-scroll.md +++ b/docs/angular/virtual-scroll.md @@ -110,11 +110,19 @@ cdk-virtual-scroll-viewport { Since the viewport is built to fit various use cases, the default sizing is not set and is up to developers to set. -## A Note on Ionic Components +## Usage with Ionic Components -Certain Ionic Framework functionality is currently not compatible with virtual scrolling. Features such as collapsible large titles, `ion-infinite-scroll`, and `ion-refresher` rely on being able to scroll on `ion-content` itself, and as a result will not work when using virtual scrolling. +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. -We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437. +For example: + +```html + + + + + +``` ## Further Reading diff --git a/docs/react/virtual-scroll.md b/docs/react/virtual-scroll.md index a895ebf7a09..de6aa30a9d1 100644 --- a/docs/react/virtual-scroll.md +++ b/docs/react/virtual-scroll.md @@ -57,6 +57,22 @@ Certain Ionic Framework functionality is currently not compatible with virtual s We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437. +## Usage with Ionic Components + +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. + +For example: + +```tsx + + + + {/* Your existing content and configurations */} + + + +``` + ## Further Reading This guide only covers a small portion of what `Virtuoso` is capable of. For more details, please see the [Virtuoso documentation](https://virtuoso.dev/). diff --git a/docs/vue/virtual-scroll.md b/docs/vue/virtual-scroll.md index 2ae8ca78bc1..47c3ebcf204 100644 --- a/docs/vue/virtual-scroll.md +++ b/docs/vue/virtual-scroll.md @@ -116,11 +116,23 @@ Now that our template is setup, we need to add some CSS to size the virtual scro } ``` -## A Note on Ionic Components +## Usage with Ionic Components -Certain Ionic Framework functionality is currently not compatible with virtual scrolling. Features such as collapsible large titles, `ion-infinite-scroll`, and `ion-refresher` rely on being able to scroll on `ion-content` itself, and as a result will not work when using virtual scrolling. +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. -We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437. +For example: + +```html + +``` ## Further Reading