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

To help you get started, we’ve selected a few body-scroll-lock examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github museui / muse-ui / src / internal / mixins / popup / manager.js View on Github external
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;
  },
github thorgate / tg-modal / src / components / Modal.js View on Github external
// 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);
            }
        }
    }
github thorgate / tg-modal / src / components / Modal.js View on Github external
// 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);
            }
        }
    }
github cozy / cozy-ui / react / Overlay / index.jsx View on Github external
componentWillUnmount() {
    // restauration function can be undefined if there was
    // an error during mounting/rendering
    clearAllBodyScrollLocks()
    if (this.props.onEscape) {
      document.removeEventListener('keydown', this.handleKeydown)
    }
  }
github qantasairways / runway / src / shared / ButtonWithDialog / __test__ / Dialog.spec.js View on Github external
it('clears body scroll lock when shouldLockBgScroll is true', () => {
      component = shallow(
        <Dialog
          {...requiredProps}
          shouldLockBgScroll
          scrollTarget="scrollTarget2"
        />
      );
      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);
    });
github qantasairways / runway / src / shared / ButtonWithDialog / __test__ / Dialog.spec.js View on Github external
it('clears body scroll lock when shouldLockBgScroll changes to false', () => {
      component = shallow(
        <Dialog
          {...requiredProps}
          shouldLockBgScroll={false}
          scrollTarget="scrollTarget1"
        />
      );
      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);
    });
github qantasairways / runway / src / shared / ButtonWithDialog / __test__ / Dialog.spec.js View on Github external
it('adds body scroll lock when shouldLockBgScroll changes to true', () => {
      component = shallow(<Dialog {...requiredProps} shouldLockBgScroll />);
      component.instance().componentDidUpdate({ shouldLockBgScroll: false });
      expect(disableBodyScroll.mock.calls.length).toBe(1);
    });
github qantasairways / runway / src / shared / ButtonWithDialog / __test__ / Dialog.spec.js View on Github external
it('adds body scroll lock when transitionState changes to "entered" and shouldLockBgScroll is true', () => {
      component = shallow(
        <Dialog
          {...requiredProps}
          shouldLockBgScroll
          transitionState="entered"
        />
      );
      component.instance().componentDidUpdate({
        shouldLockBgScroll: true,
        transitionState: 'entering'
      });
      expect(disableBodyScroll.mock.calls.length).toBe(1);
    });
  });
github qantasairways / runway / src / shared / ButtonWithDialog / __test__ / Dialog.spec.js View on Github external
it('calls disableBodyScroll and clearAllBodyScrollLocks', () => {
      component = shallow(
        <Dialog {...requiredProps} scrollTarget="scrollTarget4" />
      );
      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);
    });
  });
github qantasairways / runway / src / shared / ButtonWithDialog / __test__ / Dialog.spec.js View on Github external
it('clears body scroll lock when shouldLockBgScroll changes to false', () => {
      component = shallow(
        <Dialog
          {...requiredProps}
          shouldLockBgScroll={false}
          scrollTarget="scrollTarget1"
        />
      );
      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);
    });

body-scroll-lock

Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus)

MIT
Latest version published 1 year ago

Package Health Score

71 / 100
Full package analysis