Touch-friendly barra de desplazamiento personalizable-Mora ScrollBars
| Autor: | SandratraRM |
|---|---|
| Views Total: | 225 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 23, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
La biblioteca de JavaScript Mora ScrollBars le ayuda a crear barras de desplazamiento multiplataforma personalizables.
Las barras de desplazamiento se actualizan automáticamente cuando se cambia el tamaño de la ventana o cuando se desplaza un elemento.
See also:
Características
- Soporte para botones de flecha.
- Anterior/siguiente página desplazamiento suave cuando se hace clic en la pista.
- Capacidad para fijar la altura mínima al mango.
- Mostrará la barra de desplazamiento predeterminada en NoScript.
- Funciona muy bien en dispositivos con soporte para lápiz/tacto.
- Desactivado en dispositivos sin barras de desplazamiento.
- Funciona sin jQuery.
Funcionamiento
Agregue el MoraScrollbar. CSS a su Head de HTML antes de cualquier CSS de estilo de barra de desplazamiento personalizado:
<head> <link rel="stylesheet" href="/path/to/MoraScrollbar.css"> <link rel="stylesheet" href="/path/to/theCssWhereYouWantToCustomizeTheScrollbars.css"> </head>
A continuación, debe incluir el MoraScrollbar. js en el archivo HTML.
<script src="/path/to/MoraScrollbar.js"></script>
Dé al primer elemento la clase MSC-wrapper . Luego, dentro del primer elemento, crea el segundo elemento y dale la clase MSC-Content .
<div class="msc-wrapper"> <div class="msc-content"> Your overflowing content! Here you can put anything </div> </div>
Llame al método MoraScrollbar. Refresh () cuando:
- Se edita dinámicamente el contenido de uno de los elementos del MSC-Content.
- Agregar o quitar elementos con la clase MSC-wrapper.
- Se llega a cualquier otra situación en la que las barras de desplazamiento tienen un comportamiento inesperado.
MoraScrollbar.refresh()
Añada flechas a la barra de desplazamiento.
<div class="msc-wrapper with-arrows"> <div class="msc-content"> Your overflowing content! Here you can put anything </div> </div>
Agregue la funcionalidad de ocultación automática a la barra de desplazamiento.
<div class="msc-wrapper with-fading"> <div class="msc-content"> Your overflowing content! Here you can put anything </div> </div>
Personalice la barra de desplazamiento con las siguientes clases CSS:
- MSC-wrapper: el contenedor del contenido desbordante y la barra de desplazamiento. Piense en ello como una pantalla. Tiene desbordamiento establecido en oculto por lo que si desea escuchar el desplazamiento en JS, agregue el agente de escucha al MSC-Content. Su posición es por defecto absoluta (como todas las otras clases), puede cambiarla a relativa o fija dependiendo de sus necesidades. No le agregues relleno. Es necesario estilo para establecer las posiciones y las dimensiones.
- MSC-Content: el contenido desbordante. Puedes añadir cualquier cosa dentro de ella. Tiene desbordamiento-y a auto. No modifique el ancho, la altura, el margen, la posición.
- MSC-ScrollBar: el div generado por el MoraScrollbar. js. Es el contenedor de los botones y la pista.
- MSC-Track: la pista es la parte de la barra de desplazamiento sin los botones. Contiene el mango.
- MSC-Handle: este es el que maneja. Puede establecer su min-height estableciendo la min-height en CSS.
- MSC-BTN-up, MSC-BTN-Down: Los botones, que siempre están allí, pero sólo se ocultan en CSS con la pantalla ninguno por defecto. Así que si quieres hacer una barra de desplazamiento personalizada, te aconsejo que empieces desde el "NormalScrollbar" en lugar de con "con-flechas" uno porque puede tener un dolor de cabeza tratando de cambiar los valores predeterminados. Sólo tiene que organizar el espacio dentro de MSC-ScrollBar para los botones y la pista. Los iconos de flecha se construyen con el pseudo elemento CSS:: Before y Borders. Es posible que necesite usar pseudoelementos para usar imágenes o agregar texto.
los eventos: - using-Scroll: añade al MSC-wrapper cuando se usa la barra de desplazamiento. (Puede utilizarlo con: hover)
- Disabled (desactivado): agrega a los botones cuando no se puede empujar porque el desplazamiento está en uno de los bordes.
