HTML scrollbar custom con OverlayScrollbars
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!
javascript jquery html scrollbar overlay scrollbars
Commentami!