How to use body-scroll-lock - 10 common examples

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);
            }
        }
    }

// 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);
            }
        }
    }

componentWillUnmount() {
    // restauration function can be undefined if there was
    // an error during mounting/rendering
    clearAllBodyScrollLocks()
    if (this.props.onEscape) {
      document.removeEventListener('keydown', this.handleKeydown)
    }
  }

it('clears body scroll lock when shouldLockBgScroll is true', () => {
      component = shallow(
        <dialog>
      );
      component.instance().componentWillUnmount();

      expect(enableBodyScroll.mock.calls.length).toBe(1);
      expect(enableBodyScroll.mock.calls[0][0]).toBe('scrollTarget2');
      expect(clearAllBodyScrollLocks.mock.calls.length).toBe(1);
    });
</dialog>

it('clears body scroll lock when shouldLockBgScroll changes to false', () => {
      component = shallow(
        <dialog>
      );
      component.instance().componentDidUpdate({ shouldLockBgScroll: true });
      expect(enableBodyScroll.mock.calls.length).toBe(1);
      expect(enableBodyScroll.mock.calls[0][0]).toBe('scrollTarget1');
      expect(clearAllBodyScrollLocks.mock.calls.length).toBe(1);
    });
</dialog>

it('adds body scroll lock when shouldLockBgScroll changes to true', () => {
      component = shallow(<dialog>);
      component.instance().componentDidUpdate({ shouldLockBgScroll: false });
      expect(disableBodyScroll.mock.calls.length).toBe(1);
    });
</dialog>

it('adds body scroll lock when transitionState changes to "entered" and shouldLockBgScroll is true', () => {
      component = shallow(
        <dialog>
      );
      component.instance().componentDidUpdate({
        shouldLockBgScroll: true,
        transitionState: 'entering'
      });
      expect(disableBodyScroll.mock.calls.length).toBe(1);
    });
  });</dialog>

it('calls disableBodyScroll and clearAllBodyScrollLocks', () => {
      component = shallow(
        <dialog>
      );
      component.instance().unlockBgScroll();

      expect(enableBodyScroll.mock.calls.length).toBe(1);
      expect(enableBodyScroll.mock.calls[0][0]).toBe('scrollTarget4');
      expect(clearAllBodyScrollLocks.mock.calls.length).toBe(1);
    });
  });</dialog>

it('clears body scroll lock when shouldLockBgScroll changes to false', () => {
      component = shallow(
        <dialog>
      );
      component.instance().componentDidUpdate({ shouldLockBgScroll: true });
      expect(enableBodyScroll.mock.calls.length).toBe(1);
      expect(enableBodyScroll.mock.calls[0][0]).toBe('scrollTarget1');
      expect(clearAllBodyScrollLocks.mock.calls.length).toBe(1);
    });
</dialog>