Barra de desplazamiento personalizada mínima en Vanilla JavaScript-fakescroll
| Autor: | yairEO |
|---|---|
| Views Total: | 822 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 18, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Esta es la versión de JavaScript vainilla de la jQuery fakescroll plugin que hace que el regular Browser < a href = "https://wikicss.com/tag/scrollbar/" > ScrollBar totalmente personalizable a través de CSS.
Funcionamiento
Descargue e importe la biblioteca fakescroll en el documento.
<link rel="stylesheet" href="fakescroll.css"> <script src="fakescroll.js"></script>
Inicialice el fakescroll en su elemento desplazable. Hecho.
<div class="example"> Long Content Here </div>
document.querySelector('.example').fakeScroll(); Aplique sus propios estilos CSS a la barra de desplazamiento.
.example {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
min-height: 70%;
height: 1px;
width: 500px;
overflow: auto;
background: white;
}
.example.fakeScroll__scope { background: none; }
.example .fakeScroll__content {
padding-top: 1em;
padding-bottom: 1em;
}
.example .fakeScroll__wrap {
background: #FFF;
border-radius: 4px;
-moz-box-sizing: border-box;
box-sizing: border-box;
} Activar/desactivar la pista de la barra de desplazamiento.
document.querySelector('.example').fakeScroll({
track: true
}); Agregue una clase CSS adicional a la barra de desplazamiento.
document.querySelector('.example').fakeScroll({
classname: 'your-own-class'
});
