Bad Idea to lockscroll with a callback, while fake loading screen shown on scrolltrigger?

[newguy123]

I have a React web app with scrolltrigger.

There's a bunch of things to load on page start so I added a fake loading screen
However I dont want the user to be able to scroll while the fake loading div is shown.
Is it generally a bad idea to lock the scrollbars, or its perfectly fine with scrolltrigger?

 

Something like this:
 

import { useCallback } from 'react';

const useScrollLock = () => {
    const lockScroll = useCallback(() => {
        document.body.style.overflow = 'hidden';
    }, []);

    const unlockScroll = useCallback(() => {
        document.body.style.overflow = '';
    }, []);

    return { lockScroll, unlockScroll };
};

export default useScrollLock;

 

EDIT: I tested it and it seems to work fine.
Just want to double check if there's any gotchas I'm not aware of or if in general its not a good idea to do this when using Scrolltrigger....

?

[Rodrigo]

Nope there shouldn't be any issues as long as you create the GSAP and ScrollTrigger instances that actually depend on scrolling, after the loading is completed and the scroll bar is visible again. Just be careful with the order you do things.

 

Happy Tweening!