search

xobotyi / react-scrollbars-custom

The best React custom scrollbars component
https://xobotyi.github.io/react-scrollbars-custom/
MIT License
841 stars 75 forks source link

Content doesn't scroll + bars aren't visible during SSR #87

Open tim-soft opened 5 years ago

tim-soft commented 5 years ago

Hey, awesome library!

I've been playing around with this component in NextJS and have noticed these scrollbars disable all scrolling/do not display in the initial server side rendered HTML

Here's a basic sandbox with NextJS, and a prod version deployed to Now https://codesandbox.io/s/with-styled-components-h29mz https://csb-h29mz-3ql9wvoej.now.sh/

You can see how the scroll bars "pop in" after the bundle loads vs no scrolling/scrollbars in the initial html, disabling javascript + refreshing the prod demo should show the initial server html

I'm not sure if this is intentional behavior, ideally scrolling would be possible from the getgo

The side-effect in not having scrolling immediately can be perceived as input lag Capture

dependencies

"next": "latest",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scrollbars-custom": "4.0.5"
xobotyi commented 5 years ago

No, scrolling is not possible from the getgo because server has no window and i suppose no CSS and styles-related stuff (not sure about CSS - never used an SSR yet).

Anyways, if there is no CSS it is not possible to determine a lot of stuff, due to component uses getComputedStyle

xobotyi commented 5 years ago

@tim-soft maybe it'll be reasonable to add a prop to make tracks visible from init for situations when you're sure there will be a scrolling - it will minimize the "blink" effect for user. But there is absolutely no way to make it scrollable from the getgo due to lack of CSS on which component is rely.

tim-soft commented 5 years ago

I think that sounds pretty reasonable. In that case, maybe adding this functionality to permanentTrackX/permanentTrackY/permanentTracks would make the most sense ?