OverlayScrollbars
OverlayScrollbars copied to clipboard
KingSora
OverlayScrollbars with Virtualization Libraries
Since this is a pretty frequent topic I've decided to create a list of examples where OverlayScrollbars plays together with various virtualization libraries.
If your library or framework of choice is not in this list, please respond in this issue with the name & link of the library and if possible with an minimal example on StackBlitz. You can also create a separate issue.
React
react-window (package)
- Example with FixedSizeList
- Example with FixedSizeList & Horizontal Layout
- Example with VariableSizeList
react-virtualized (package)
react-virtuoso (package)
- Example with Virtuoso
- Example with TableVirtuoso
- Example with TableVirtuoso and Fixed Columns
- Example with VirtuosoGrid
@tanstack/react-virtual (package)
- Example with useVirtualizer
- Example with useVirtualizer & Horizontal Layout
- Example with useVirtualizer & Grid Layout
- Example with useVirtualizer & OverlayScrollbarsComponent
virtua (package)
@ag-grid-community/react (package)
@handsontable/react (package)
masonic (package)
Angular
@angular/cdk (package)
Hi. Can you tell me how to connect react-virtualized to overlayscrollbars-react?
@Tishkin I'm currently on vacation and wont be able to create an example for at least another week
@KingSora , hi, can you add example, how to use overlayscrollbars-react with virtua ? (https://github.com/inokawa/virtua)
@KingSora hi, I would be great to have example with angular virtual scroll (https://material.angular.io/cdk/scrolling/overview)
Hi would you like to add example of masonic (https://www.npmjs.com/package/masonic)
demo: https://codesandbox.io/s/0oyxozv75v
@KingSora The example for virtua is broken, no scrollbar is shown.
https://stackblitz.com/edit/vitejs-vite-t1cjd9fr?file=package.json
This reproduction is forked from the example abobe, with only changes to update virtua and overlayscrollbars to the latest version.
@sep2 sorry for the inconvenience, thats because of a small oversight from my side in the v2.11.2 release. I've published v2.11.3 which should fix the issue: https://stackblitz.com/edit/vitejs-vite-ymr6o96k
For Vue-based projects, the combination of the libraries overlayscrollbars-vue and @tanstack/vue-virtual works well.
There are no readily available implementation examples of this combination online.
It is important to create a custom wrapper component around overlayscrollbars-vue that exposes a reference to the DOM element with a styled scrollbar. This DOM reference should then be used as the scroll container for @tanstack/vue-virtual to apply its virtualization logic.
With Angular, I can't make it work .... The only result is that my 12 first cards scrolls... but finally, the place for other cards is empty... and it is only these 12 first cards..
If I remove the parentScroll attribute, virtual-scroller uses its own scrollbars....
sad ;(
"@iharbeck/ngx-virtual-scroller": "^19.0.1",
"overlayscrollbars": "^2.12.0",
"overlayscrollbars-ngx": "^0.5.2",
` <overlay-scrollbars [options]="{ scrollbars: { autoHide: 'move'} }" #osTarget> <virtual-scroller #scroll [items]="panel.cacheFilteredPostits" [horizontal]="false" [parentScroll]="osTarget.getElement()" [enableUnequalChildrenSizes]="true"> @for (postit of scroll.viewPortItems; track postit; let index = $index) {
`
@samfrach Good day :)
I've added a working example for you:
@iharbeck/ngx-virtual-scroller (package)
Hi, I think the angular/cdk example is missing some code, it doesn't render any items I don't see the scrolling module being used anywhere.
@PieckaAndrej you are right.. not sure how that happened.. Should be working again :)
Thank you! I also just wanted to mention that react-window has released a v2 version that may need an updated example.