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

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 alfonsobries / vue-tailwind / src / components / TModal.vue View on Github external
beforeClose() {
      enableBodyScroll(this.$refs.modal);
      this.$emit('before-close');
    },
    closed() {
github chakra-ui / chakra-ui / packages / chakra-ui-hooks / src / useLockBodyScroll.tsx View on Github external
return () => {
      if (dialogNode) {
        enableBodyScroll(dialogNode);
      }
    };
  }, [isEnabled, preserveScrollBarGap]);
github aholachek / mobile-first-animation / src / MusicDrawer / index.js View on Github external
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
        })
      }

      const newY = rubberBandIfOutOfBounds(
        stops[stops.length - 1],
        stops[0],
        movementY + memo,
        0.08
github zerosoul / tech-logo-memo-game / src / components / Alert.js View on Github external
const handleClose = () => {
    enableBodyScroll(modal.current);
    setAlert(false);
  };
  useEffect(() => {
github aholachek / mobile-first-animation / src / Drawer / index.js View on Github external
({ last, movement: [, movementY], vxvy: [, velocityY], memo }) => {
      if (!memo) {
        const isIntentionalGesture = Math.abs(movementY) > threshold
        if (!isIntentionalGesture) return
        memo = y.value - movementY
      }

      disableBodyScroll(containerRef.current)

      if (last) {
        enableBodyScroll(containerRef.current)

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

        const notificationClosed = point === yStops.current[1]

        return set({
          y: notificationClosed ? yStops.current[1] : yStops.current[0],
          onRest: notificationClosed ? removeDrawer : () => {},
          immediate: false
        })
      }
github ManifoldScholar / manifold / client / src / global / components / drawer / Wrapper.js View on Github external
disableScrollLock() {
    if (!this.canLockScroll) return;
    enableBodyScroll(this.scrollableNode.current);
  }
github reg-viz / reg-cli-report-ui / src / components / Dialog / Dialog.tsx View on Github external
() => () => {
      const { current: body } = bodyRef;
      if (body != null) {
        enableBodyScroll(body);
      }

      const { current: focus } = focusRef;
      if (focus != null) {
        focus.deactivate();
      }
    },
    [],
github chakra-ui / chakra-ui / packages / chakra-ui / src / Modal / index.js View on Github external
    return () => enableBodyScroll(dialogNode);
  }, [isOpen, blockScrollOnMount, preserveScrollBarGap]);

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 3 years ago

Package Health Score

71 / 100
Full package analysis