xobotyi/react-scrollbars-custom

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

Opened this issue · 3 comments

tim-soft commented

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

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

@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

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