search

KingSora / OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
https://kingsora.github.io/OverlayScrollbars
MIT License
3.71k stars 215 forks source link

react-window flickers #595

Closed codingedgar closed 7 months ago

codingedgar commented 7 months ago

It took a bit of time, but with v2 OverlayScrollbars should work with all virtual scroll libraries. I've created a small example for FixedSizeList here: https://stackblitz.com/edit/react-8glpkm?file=index.js and also an example with horizontal layout: https://stackblitz.com/edit/react-wdbggw?file=index.js

You can use this approach also for VariableSizeList, FixedSizeGrid and FixedSizeGrid.

Hello, thank you for the library, and sorry for the silly question but, how could I remove the flicker at the start? tried to add data-overlay scrollbars-initialize in https://stackblitz.com/edit/react-8glpkm?file=index.js but there are still a few frames where the initial scrollbar is visible

Originally posted by @codingedgar in https://github.com/KingSora/OverlayScrollbars/issues/148#issuecomment-1852678254

KingSora commented 7 months ago

Good day @codingedgar

I believe the simplest fix is to remove the defer: true option,

If you wanna keep the defer: true option you can also use CSS to hide the overflow until the plugin is initialized: https://stackblitz.com/edit/react-hbvak1?file=index.js,style.css The css class .react-window will set the style overflow: hidden !important until OverlayScrollbars is initialized.

If you wanna keep everything in JS you can also use a react state: https://stackblitz.com/edit/react-o8zauw?file=index.js,style.css

codingedgar commented 7 months ago

That worked perfectly; thank you so much!