HTML scrollbar custom con OverlayScrollbars

Mattepuffo's logo
HTML scrollbar custom con OverlayScrollbars

HTML scrollbar custom con OverlayScrollbars

Programmazione, Javascript - AJAX

OverlayScrollbars è un plugin per le nostre pagine web che ci permette di customizzare la classica barra di scorrimento.

Le soluzioni che prevedono il CSS non funzionano praticamente mai; quanto meno a me non hanno mai funzionato.

Questo plugin, invece, ci permette di customizzarle usando Javascript o jQuery.

Noi useremo la versione con jQuery; avete a disposizione anche i CDN da cui prendere la versione che vi serve, e il CSS.

Inoltre, possiamo anche usare alcuni temi già fatti, o crearne di nuovi ovviamente.

Io ho usato uno di quelli già fatti, che trovate qui.

Ecco il codice completo della pagina:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>TEST</title>
        <link rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.12.0/css/OverlayScrollbars.min.css">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.12.0/js/jquery.overlayScrollbars.min.js"></script>
        <script>
            $(function () {
                $('body').overlayScrollbars({
                    className: "os-theme-dark os-theme-round-dark"
                });
            });
        </script>
        <style>
            .os-theme-round-dark > .os-scrollbar {
                padding: 0;
            }
            .os-theme-round-dark > .os-scrollbar-horizontal {
                right: 20px;
                height: 20px;
            }
            .os-theme-round-dark > .os-scrollbar-vertical {
                bottom: 20px;
                width: 20px;
            }
            .os-theme-round-dark.os-host-rtl > .os-scrollbar-horizontal {
                left: 20px;
                right: 0;
            }
            .os-theme-round-dark > .os-scrollbar-corner {
                height: 20px;
                width: 20px;
                background-color: transparent;
            }
            .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track {
                background: transparent;
            }
            .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
            .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
                content: '';
                display: block;
                position: absolute;
                background: rgba(0, 0, 0, 0.15);
            }
            .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before {
                left: 3px;
                right: 3px;
                height: 2px;
                top: 50%;
                margin-top: -1px;
            }
            .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
                top: 3px;
                bottom: 3px;
                width: 2px;
                left: 50%;
                margin-left: -1px;
            }
            .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
                background: transparent;
            }
            .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
                content: '';
                display: block;
                position: absolute;
                background: #000;
                border-radius: 100%;
                top: 3px;
                bottom: 3px;
                left: 3px;
                right: 3px;
                transform: scale(1);
            }
            .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
            .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
                transform: scale(1.3);
            }
            .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
                height: 100%;
                min-width: 20px;
                max-width: 20px;
            }
            .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
                width: 100%;
                min-height: 20px;
                max-height: 20px;
            }
            .os-theme-round-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
                transition: transform 0.3s;
            }
        </style>
    </head>
    <body>
        <ul>
            <?php for ($i = 0; $i < 100; $i++): ?>
                <li><?php echo $i; ?></li>
            <?php endfor; ?>
        </ul>
    </body>
</html>

Come vedete, alla opzione className ho passato sia il tema built-in dark, che quello che ho preso dalla pagina indicata sopra.

Poi ho riempito la pagina con un pò di PHP, giusto per farla scorrere.

In questo caso lo abbiamo applicato a tutto il body, ma possiamo anche applicarlo a singoli elementi.

Infine, abbiamo a disposizione molte opzioni e funzioni di callback, che potete vedere nella documentazione.

Enjoy!

Condividi

Commentami!