Smooth arrastrar a la biblioteca de desplazamiento-Scrollbooster

Vista prévia

Descripción

Scrollbooster es una biblioteca de JavaScript pequeña y de dependencia cero que proporciona la funcionalidad de arrastrar a desplazamiento suave (con o sin un efecto de rebote de inercia) para cualquier contenido.

Funcionamiento

Instala e importa la librería Scrollbooster.

# NPM
$ npm install scrollbooster --save

import ScrollBooster from 'scrollbooster'

Alternativamente, puede cargar manualmente el script ' scrollbooster. min. js ' a su documento como esto:

<script src="dist/scrollbooster.min.js"></script>

Agregue el contenido desplazable a un elemento de ventana gráfica.

<div class="app">

<div class="app-inner">


Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem corrupti reiciendis, mollitia molestias magni quasi voluptates culpa dignissimos minima hic.


Lorem ipsum dolor sit amet consectetur adipisicing elit. In praesentium odit ex officia, possimus qui omnis, facere incidunt neque ducimus suscipit! Vel, neque! Sapiente tempora veritatis voluptatem itaque! Repellendus, optio.

</div>
</div>

Active la funcionalidad de arrastrar y desplazarse suave en el contenido.

let viewport = document.querySelector('.app')
let content = viewport.querySelector('.app-inner')

let scr = new ScrollBooster({


viewport: viewport,


content: content,


onUpdate: (data)=> {



// viewport.scrollLeft = data.position.x



// viewport.scrollTop = data.position.y



content.style.transform = `translate(




${-data.position.x}px,




${-data.position.y}px



)`


}
})

Habilite o deshabilite el efecto rebote de inercia.

let scr = new ScrollBooster({


viewport: viewport,


content: content,


bounce: true,


bounceForce: .1,


friction: .05
})

Si desea emular eventos de rueda de ratón de ventana gráfica.

let scr = new ScrollBooster({


viewport: viewport,


content: content,


emulateScroll: false
})

Más callbacks.

let scr = new ScrollBooster({



// Function that receives object with scrolling metrics and event object.


 // Calls after each click in scrollable area.


 // Here you can, for example, prevent default event for click on links


onClick: function(){},



// Function that receives object with scrolling metrics and event object.


 // Calls on pointerdown (mousedown, touchstart) in scrollable area. Here you can return true or false to start actual scrolling or not


shouldScroll: function(){}



})

Métodos de la API:

// Sets new scroll position in viewport.
 scr.setPosition(x,y);

// Updates element's size
scr.updateMetrics();

// Returns current metrics and coordinates in a same format as onUpdate
scr.getUpdate();

 // Destroy
scr.destroy();

Registro de cambios

10/31/2018

• Añadidas más funciones de devolución de llamada