https://github.com/hunghg255/scrollbar-block

A tiny library to block the scrollbar of the body element ✨
https://github.com/hunghg255/scrollbar-block

block lock package scrollbar

Last synced: 12 months ago
JSON representation

A tiny library to block the scrollbar of the body element ✨

• Host: GitHub
• URL: https://github.com/hunghg255/scrollbar-block
• Owner: hunghg255
• License: mit
• Created: 2024-05-14T02:27:53.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-14T02:28:11.000Z (about 2 years ago)
• Last Synced: 2025-07-01T06:11:33.410Z (12 months ago)
• Topics: block, lock, package, scrollbar
• Language: TypeScript
• Homepage: https://scrollbar-block.vercel.app
• Size: 121 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

          










  A tiny library to block the scrollbar of the body element ✨





  

  

  

  

  



## Live demo

[Live Demo](https://scrollbar-block.vercel.app/)

## Installation

[![NPM](https://nodei.co/npm/scrollbar-block.png?compact=true)](https://nodei.co/npm/scrollbar-block/)

## Install

```

npm i scrollbar-block@latest

```

## Use

```tsx

import React, { useEffect, useState } from 'react';

import { scrollbarBlock } from 'scrollbar-block';

function Modal({ open, children }) {

  const dialogRef = React.useRef(null);

  const unlockScrollbars = React.useRef(null);

  useEffect(() => {

    const dialogNode = dialogRef.current;

    if (dialogNode) {

      if (open) {

        dialogNode.showModal();

        unlockScrollbars.current = lockScrollbars();

      } else {

        dialogNode.close();

        unlockScrollbars.current?.();

      }

    }

  }, [open]);

  return {children};

}

```

### About



Gia Hung – [hung.hg](https://hung.thedev.id)