Barra de desplazamiento personalizada con vainilla JavaScript-vanillaScroll
| Autor: | Mobius1 |
|---|---|
| Views Total: | 2,575 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 5, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
vanillaScroll is a small vanilla JavaScript plugin which turns a block element into a scrollable area with a custom scrollbar.
¿Cómo funciona?
Descargue e incluya vanillaScroll. js en la página HTML.
<script src="vanillaScroll.js"></script>
Aplique la barra de desplazamiento personalizada en un contenedor especificado.
var element = document.getElementById('myElement'),
options = {
// options here
};
myScroller = new vanillaScroll(element, options); Reemplace los estilos predeterminados de la barra de desplazamiento.
.slick-wrapper { position: relative; }
.slick-rail {
background-color: transparent;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.slick-bar {
background-color: #999;
height: 100px;
position: absolute;
right: 0;
cursor: pointer;
width: 100%;
}
.slick-rail.enabled { background-color: #ddd; }
.slick-wrapper.hover > .slick-rail {
opacity: 0;
transition: opacity 250ms ease 1000ms;
}
.slick-wrapper.hover:hover > .slick-rail {
opacity: 1;
transition: opacity 250ms;
} Opciones disponibles.
options = {
width: "auto",
height: "100%",
size: 15,
scrollAmount: 10, // the amount to scroll the content with the mouse wheel
scrollRate: 20,
rail: false,
alwaysShow: false, // false = show on hover
position: "right"
};
