Get started with body-scroll-lock CDN

MIT licensed

Body-scroll-lock: Lightweight library. Locks body scrolling for modals, fullscreen elements on element scroll.

Tags:
  • body scroll
  • body scroll lock
  • react scroll lock
  • react scroll
  • scroll
  • lock
  • freeze
  • toggle
  • disable
  • overflow
  • modal
  • lightbox
  • react
  • vanilla-js
  • angular
  • vue
  • ios
  • mobile
  • desktop
  • tablet
  • bsl

Stable version

Copied!

How to start using body-scroll-lock CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with body-scroll-lock CDN - cdnhub.io</title>
    <style>
        #modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }
        #modal-content {
            width: 50%;
            margin: 16% auto;
            padding: 2rem;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <button id="lock">Lock body scroll</button>
    <button id="unlock">Unlock body scroll</button>
    <div id="modal">
        <div id="modal-content">
            <p>Scrolling is locked.</p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@floating-ui/react@3.1.1/dist/index.min.js"></script>
    <script src="https://cdn.cdnhub.io/body-scroll-lock/3.1.5/bodyScrollLock.min.js"></script>

    <script>
        const lockBtn = document.getElementById('lock');
        const unlockBtn = document.getElementById('unlock');
        const bodyEl = document.body;

        let scrollLock;

        lockBtn.addEventListener('click', () => {
            scrollLock = BodyScrollLock.default.lock(bodyEl);
        });

        unlockBtn.addEventListener('click', () => {
            scrollLock.unlock();
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                if (scrollLock) {
                    scrollLock.unlock();
                }
            }
        });

        document.getElementById('modal').addEventListener('click', (event) => {
            if (event.target === document.getElementById('modal')) {
                if (scrollLock) {
                    scrollLock.unlock();
                }
            }
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions