How to use the body-scroll-lock.disableBodyScroll function in body-scroll-lock

preventScrolling () {
    if (this.locked) return;
    // body 操作
    const body = document.getElementsByTagName('body')[0];
    disableBodyScroll(body, {
      reserveScrollBarGap: true,
      allowTouchMove: (el) => {
        for (let i = 0; i < this.instances.length; i++) {
          if (
            this.instances[i] &&
            this.instances[i].$el &&
            this.instances[i].$el.contains(el)
          ) {
            return true;
          }
        }
        return false;
      }
    });
    this.locked = true;
  },

// Increment modal count when opening.
            if (state) {
                numberOfModalsOpen += 1;
            }

            // Add toggle body class and update body padding if there is only one modal open.
            if (numberOfModalsOpen === 1) {
                // Toggle open class.
                toggleClass(body, 'tg-modal-open', state);

                const { bodyScrollLock } = this.props;

                if (state) {
                    if (bodyScrollLock && this.node.current) {
                        disableBodyScroll(this.node.current, {
                            reserveScrollBarGap: true,
                        });
                    }
                } else if (bodyScrollLock && this.node.current) {
                    clearAllBodyScrollLocks();
                }
            }

            // Decrement modal count when closing.
            if (!state) {
                numberOfModalsOpen = Math.max(numberOfModalsOpen - 1, 0);
            }
        }
    }

lockBgScroll = () => {
    const { scrollTarget } = this.props;
    disableBodyScroll(scrollTarget);
  };

componentDidMount() {
    if (this.nodeRefs.scrollTarget.current) disableBodyScroll(this.nodeRefs.scrollTarget.current);
  }

this.$nextTick(function () {
          this.menuEl = document.querySelector('.rpl-site-header__menu-container')
          if (this.menuEl) {
            disableBodyScroll(this.menuEl)
          }
        })
      } else {

useEffect(() => {
    const { current: wrapper } = wrapperRef;
    const { current: focus } = focusRef;
    if (wrapper == null || focus == null) {
      return;
    }

    if (sidebar.isOpen) {
      focus.activate();
      disableBodyScroll(wrapper);
    } else {
      focus.deactivate();
      enableBodyScroll(wrapper);
    }
  }, [sidebar.isOpen]);

componentDidUpdate(prevProps: PanelProps) {
    if (prevProps.isShown !== this.props.isShown) {
      if (this.props.isShown === false) {
        clearAllBodyScrollLocks();
      } else if (this.scrollEl) {
        disableBodyScroll(this.scrollEl);
      }
    }
  }

useEffect(() => {
    if (isMobileMenuOpen) {
      disableBodyScroll(menuRef.current);
    } else {
      enableBodyScroll(menuRef.current);
    }

    return () => {
      clearAllBodyScrollLocks();
    };
  }, [isMobileMenuOpen, menuRef]);

componentDidMount() {
    if (bodyTallerThanWindow()) {
      disableBodyScroll(document.body)
      disableBodyScroll(document.body.parentNode)
    }
    if (this.props.onEscape) {
      document.addEventListener('keydown', this.handleKeydown)
    }
  }

event.preventDefault()

      const drawerIsOpen = y.value === stops[1]

      const isClick =
        last && Math.abs(movementX) + Math.abs(movementY) <= 3 && !drawerIsOpen

      if (isClick) return setDrawerOpen()

      if (!memo) {
        const isIntentionalGesture =
          Math.abs(movementY) > threshold &&
          Math.abs(movementY) > Math.abs(movementX)

        if (!isIntentionalGesture) return
        disableBodyScroll(nowPlayingDrawerRef.current)
        memo = y.value - movementY
      }

      if (last) {
        enableBodyScroll(nowPlayingDrawerRef.current)

        const projectedEndpoint = y.value + projection(velocityY)
        const point = findNearestNumberInArray(projectedEndpoint, stops)

        return set({
          y: point,
          immediate: false,
          config: spring
        })
      }