Having Trouble disabling Scroll Temporarily

[blitzve0]

Hi, My Goal is to Temporarily Disable Scrolling until my Website is Showing The Loading Screen.

Problem1: I cannot initialize smooth-scrollbar on the loading page so I cannot access the smoothscrollbar instance on my loading.js page. It is initialized on index.js page and that cannot be changed.

Problem 2 : I found this code online to remove event listeners temporarily but this also does not work scrolling still happens

  //$ Disable Scroll When Loading
  useEffect(() => {
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    // left: 37, up: 38, right: 39, down: 40,
    var keys = { 32: 1, 33: 1, 34: 1, 35: 1, 36: 1, 37: 1, 38: 1, 39: 1, 40: 1 }

    function preventDefault(e) {
      e.preventDefault()
    }

    function preventDefaultForScrollKeys(e) {
      if (keys[e.keyCode]) {
        preventDefault(e)
        return false
      }
    }

    // modern Chrome requires { passive: false } when adding event
    var supportsPassive = false
    try {
      window.addEventListener(
        'test',
        null,
        Object.defineProperty({}, 'passive', {
          get: function () {
            supportsPassive = true
          },
        })
      )
    } catch (e) {}

    var wheelOpt = supportsPassive ? { passive: false } : false
    var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel'

    //$ Initiate Disable and Enabling Scroll
    window.addEventListener('DOMMouseScroll', preventDefault, false) // older FF
    window.addEventListener(wheelEvent, preventDefault, wheelOpt) // modern desktop
    window.addEventListener('touchmove', preventDefault, wheelOpt) // mobile
    window.addEventListener('keydown', preventDefaultForScrollKeys, false)
    return () => {
      window.removeEventListener('DOMMouseScroll', preventDefault, false)
      window.removeEventListener(wheelEvent, preventDefault, wheelOpt)
      window.removeEventListener('touchmove', preventDefault, wheelOpt)
      window.removeEventListener('keydown', preventDefaultForScrollKeys, false)
    }
  }, [])

Is there a way to disable scroll in this case as I do not have a scroller instance on loading.js page.
For live view https://haspr.in/ , You can check the loading screen when visible is scrollable, I want to solve this issue

[idiotWu]

Are you calling event.stopPropagation() somewhere else in your app? If so, try setting capture to true to catch those events first:

// old browsers
addEventListener(name, handler, true);
// modern browsers
addEventListener(name, handler, {
  passive: false,
  capture: true,
});

[blitzve0]

I used document.body... instead of window.addE.. and it worked