How to enable or create observer before the page content loaded in react typescript?

[Krix]

When using Observer in React, it does not prevent the scroll or touch event at the beginning before page content is loaded. So when I scroll or touch before the observer is created, the page will scroll down. Is there any way to know when the observer prevents default is active to not let the user scroll? Tks for spending time on my topic.

This situation happens in mobile devices.

You can watch the video I demo at here: https://drive.google.com/file/d/18FOc1qc-5xf-tIKMLJGDFu6-0UG4E_w9/view

 

And I also attach the example project link: https://codesandbox.io/s/blissful-moore-s9qzj5?file=/src/pages/page1/index.tsx

[Cassie]

Hi there! 

Not sure what you mean by 'before the page content is loaded' I assume that's 'before JS' ? If so you'll need an HTML CSS solution. Preferably inline CSS on the tag itself or in the head so there's no delay waiting for a CSS resource to load.

 

I would suggest putting height: 100vh and overflow hidden on your body/html and then removing that with JS on page load.

 

Also I noticed you're not using context, that's a big React error! Check out this guide

Hope this helps✨