Get started with slim-scroll CDN

MIT licensed

SlimScroll is a lightweight library for implementing slim, customizable scrollbars.

Tags:
  • slim-scroll
  • scroll

Stable version

Copied!

How to start using slim-scroll CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with slim-scroll CDN - cdnhub.io</title>
    <style>
        #scrollable {
            height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div id="scrollable">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras porttitor metus justo, ut fringilla urna bibendum et. Donec id elit non mi porta gravida at eget magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam quis libero et mauris iaculis bibendum. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus ut dui nunc. Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Phasellus ut dui nunc. Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec bibendum scelerisque ante, vitae placerat lacus rhoncus et. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.cdnhub.io/slim-scroll/1.3.3/slimscroll.min.js"></script>
    <script>
        $(function() {
            $('#scrollable').slimscroll({
                height: '200px',
                railOpacity: 0.2
            });
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions