Get started with simplebar CDN

MIT licensed

High-performance, lightweight scrollbar component: SimpleBar enhances web app scrolling.

Tags:
  • simplebar
  • scrollbar

Stable version

Copied!

How to start using simplebar CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with simplebar CDN - cdnhub.io</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.5/dist/simplebar.min.js"></script>
</head>
<body>
    <div id="container" style="height: 400px; overflow: auto;">
        <button id="generate-content-btn">Generate Content</button>
        <ul id="content"></ul>
    </div>

    <script>
        const container = document.getElementById('container');
        const content = document.getElementById('content');
        const generateContentBtn = document.getElementById('generate-content-btn');

        SimpleBar.init(container);

        generateContentBtn.addEventListener('click', () => {
            for (let i = 0; i < 100; i++) {
                const li = document.createElement('li');
                li.textContent = `Item ${i + 1}`;
                content.appendChild(li);
            }
            container.dispatchEvent(new Event('scroll'));
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions