Barra de desplazamiento suave de navegador cruzado en Vanilla JavaScript-barra de desplazamiento suave
| Autor: | idiotWu |
|---|---|
| Views Total: | 2,004 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 10, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
La biblioteca de JavaScript Smooth ScrollBar le permite implementar Cross-browser, alto rendimiento, altamente personalizable < a href = "https://wikicss.com/tag/scrollbar/" > ScrollBars con suaves efectos de desplazamiento cinético/Momentum.
Funcionamiento
Instale la barra de desplazamiento suave a través de NPM.
npm install smooth-scrollbar --save
Importe la barra de desplazamiento suave al proyecto e inicialícela de la siguiente manera:
import Scrollbar from 'smooth-scrollbar';
Scrollbar.init(document.querySelector('#my-scrollbar')); Opciones posibles para personalizar la barra de desplazamiento suave.
Scrollbar.init(document.querySelector('#my-scrollbar'),{
/**
* Momentum reduction damping factor, a float value between `(0, 1)`.
* The lower the value is, the more smooth the scrolling will be
* (also the more paint frames).
*/
@range(0, 1)
damping = 0.1;
/**
* Minimal size for scrollbar thumbs.
*/
@range(0, Infinity)
thumbMinSize = 20;
/**
* Render every frame in integer pixel values
* set to `true` to improve scrolling performance.
*/
@boolean
renderByPixels = true;
/**
* Keep scrollbar tracks visible
*/
@boolean
alwaysShowTracks = false;
/**
* Set to `true` to allow outer scrollbars continue scrolling
* when current scrollbar reaches edge.
*/
@boolean
continuousScrolling = true;
/**
* Delegate wheel events and touch events to the given element.
* By default, the container element is used.
* This option will be useful for dealing with fixed elements.
*/
delegateTo: EventTarget | null = null;
}); Registro de cambios
v8.3.1 (10/10/2018)
- scrollTo: cancelar la animación anterior
