useScrollBlocker

@coinbase/cds-web@8.34.1

Block and unblock page scrolling.

Import

import { useScrollBlocker } from '@coinbase/cds-web/hooks/useScrollBlocker'

SourceView source code

---

󰏖

View as Markdown

---

Basic usage

Loading...

󰙡

Live Code

function Example() {
  const blockScroll = useScrollBlocker();
  const [isBlocked, setIsBlocked] = useState(false);

  const toggleScroll = () => {
    setIsBlocked(!isBlocked);
    blockScroll(!isBlocked);
  };

  return (
    <VStack gap={3} alignItems="start">
      <Text font="headline">Scroll is currently {isBlocked ? 'blocked' : 'enabled'}</Text>
      <Button onClick={toggleScroll}>{isBlocked ? 'Enable Scroll' : 'Block Scroll'}</Button>
    </VStack>
  );
}

---

With Overlay

Loading...

󰙡

Live Code

function Example() {
  const blockScroll = useScrollBlocker();
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
    blockScroll(true);
  };

  const closeModal = () => {
    setIsOpen(false);
    blockScroll(false);
  };

  return (
    <VStack gap={3} alignItems="start">
      <Button onClick={openModal}>Open Overlay</Button>
      <Modal visible={isOpen} onRequestClose={closeModal}>
        <ModalHeader title="Modal Title" />
        <ModalBody>Modal Content</ModalBody>
      </Modal>
    </VStack>
  );
}