Get started with scroll-lock CDN

MIT licensed

The Scroll-lock.js library allows you to lock or unlock the scrolling of a webpage during user interactions.

Tags:
  • scroll
  • scrollbar
  • ios
  • lock scroll
  • disable scroll
  • modal
  • mobile
  • overflow

Stable version

Copied!

How to start using scroll-lock CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with scroll-lock CDN - cdnhub.io</title>
  <style>
    #container {
      height: 100vh;
      width: 100%;
      overflow-y: scroll;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/scroll-lock.min.js"></script>
</head>
<body>
  <button id="lock-scroll">Lock Scroll</button>
  <button id="unlock-scroll">Unlock Scroll</button>
  <div id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam quam bibendum ipsum, nec luctus turpis nibh sit amet quam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam quam bibendum ipsum, nec luctus turpis nibh sit amet quam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam quam bibendum ipsum, nec luctus turpis nibh sit amet quam.</p>
  </div>
  <script>
    const lockScrollBtn = document.getElementById('lock-scroll');
    const unlockScrollBtn = document.getElementById('unlock-scroll');
    const container = document.getElementById('container');

    lockScrollBtn.addEventListener('click', () => {
      ScrollLock.scroll(container).then(() => {
        lockScrollBtn.textContent = 'Unlock Scroll';
      });
    });

    unlockScrollBtn.addEventListener('click', () => {
      ScrollLock.unlock(container).then(() => {
        unlockScrollBtn.textContent = 'Lock Scroll';
      });
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions