useLockBodyScroll.md

useLockBodyScroll

Vue side-effect hook that locks scrolling on the body element. Useful for modal and other overlay components.

Accepts ref object pointing to any HTML element as second parameter. Parent body element will be found and it's scroll will be locked/unlocked. It is needed to proper iFrame handling.
By default it uses body element of script's parent window.

Note: To improve performance you can pass body's or iframe's ref object, thus no parent lookup will be performed

Usage

import {useLockBodyScroll, useToggle} from 'vue-next-use';

const Demo = () => {
  const [locked, toggleLocked] = useToggle(false)

  useLockBodyScroll(locked);

  return (
    <div>
      <button onClick={() => toggleLocked()}>
        {locked ? 'Unlock' : 'Lock'}
      </button>
    </div>
  );
};

Reference

useLockBodyScroll(locked: boolean = true, elementRef?: RefObject<HTMLElement>);

• locked — Hook will lock scrolling on the body element if true, defaults to true
• elementRef — The element ref object to find the body element. Can be either a ref to body or iframe element.