Skip to content

feat(virtual-scroll): usage with custom scroll target #2229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 8, 2022
Merged

feat(virtual-scroll): usage with custom scroll target #2229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6f6cc5b
feat(virtual-scroll): usage with custom scroll target
sean-perkins Mar 15, 2022
1a1c92d
fix(): angular virtual scroll formatting
sean-perkins Mar 16, 2022
5a050c6
fix(): formatting
sean-perkins Mar 16, 2022
5ca2841
fix(): angular prop binding syntax
sean-perkins Mar 16, 2022
e2f3914
fix(): comment style
sean-perkins Mar 16, 2022
d8f9739
docs(): update vue virtual scroll example
sean-perkins Apr 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions docs/angular/virtual-scroll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<ion-content [scrollY]="false">
<cdk-virtual-scroll-viewport class="ion-content-scroll-host">
<!-- Your existing content and configurations -->
</cdk-virtual-scroll-viewport>
</ion-content>
```

## Further Reading

Expand Down
16 changes: 16 additions & 0 deletions docs/react/virtual-scroll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<IonPage>
<IonContent scrollY={false}>
<Virtuoso className="ion-content-scroll-host">
{/* Your existing content and configurations */}
</Virtuoso>
</IonContent>
</IonPage>
```

## 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/).
18 changes: 15 additions & 3 deletions docs/vue/virtual-scroll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<template>
<ion-page>
<ion-content :scroll-y="false">
<RecycleScroller class="ion-content-scroll-host scroller">
<!-- Your existing content and configurations -->
</RecycleScroller>
</ion-content>
</ion-page>
</template>
```

## Further Reading

Expand Down