scroller

Desplazador

Rápido, liviano (4kb GZIP) y desplazador de contenido sin dependencia.

Ejemplo.mp4

Para obtener más ejemplos de cómo funciona con diferentes configuraciones y condiciones de UI, consulte este enlace.

Instalación

Instale el desplazamiento con NPM:

npm install prokrutchik

Agregue los scripts y estilos a su proyecto:

 import { Scroller } from "prokrutchik" ;
import "prokrutchik/styles.css" ;

O agréguelos directamente al archivo HTML:

 < script src =" /path/to/prokrutchik/browser.js " > </ script >
< link href =" /path/to/prokrutchik/styles.css " rel =" stylesheet " />

Inicialización

Por defecto, Scroller proporciona inicialización automática para todos los elementos .scroller en la página:

 < ul class =" scroller " >
  < li > First item </ li >
  < li > Second item </ li >
  < li > Third item </ li >
</ ul >

También puede inicializar la instancia manualmente:

 < ul class =" foo " >
  < li > First item </ li >
  < li > Second item </ li >
  < li > Third item </ li >
</ ul >

< script type =" module " >
  import { Scroller } from "prokrutchik" ;

  const instance = new Scroller ( {
    element : document . querySelector ( ".foo" ) ,
  } ) ;
</ script > 

Configuración

Puede configurar el desplazamiento a través de atributos data- en HTML:

• data-navigation , muestra/oculta los botones de navegación, "visible" | "hidden" ;
• data-scrollbar , muestra/oculta la barra de desplazamiento bajo el contenido, "visible" | "hidden" ;
• data-align , especifica cómo alinear el contenido si se ajusta a la pantalla, "start" | "center" | "end" ;
• data-start-position , posición inicial del contenido, number of px | "start" | "center" | "end" ;
• data-start-duration , duración de animación inicial, number of milliseconds .

Los elementos del desplazador se pueden configurar con:

• data-anchor , etiqueta del elemento en la navegación, string ;
• El desplazador data-focused , si se define, se desplazará a este elemento al comienzo.

Usando JavaScript

También puede configurar Scroller usando el objeto de configuración:

 const scroller = new Scroller ( {
  element : document . querySelector ( ".foo" ) ,

  // Show/hide the scrollbar, "visible" | "hidden":
  scrollbar : "hidden" ,

  // Show/hide the navigation, "visible" | "hidden":
  navigation : "hidden" ,

  // How to align content if it fits the screen, "start" | "center" | "end":
  align : "center" ,

  // Initial scroller content position, "start" | "center" | "end" | number of px:
  startPosition : "center" ,

  // Starting animation duration, number of milliseconds:
  startDuration : 500 ,
} ) ; 

API pública

Scroller proporciona API para cambiar la posición actual, manejar los clics del elemento y actualizar dinámicamente la configuración.

Cambio de posición

Para el cambio de posición, use el método scrollTo :

 // Scrolls to the beginning of the content
scroller . scrollTo ( "start" ) ;

// Scrolls to the center of the content:
scroller . scrollTo ( "center" ) ;

// Scrolls to the end of the content:
scroller . scrollTo ( "end" ) ;

// Scrolls to 100px from the start of the content:
scroller . scrollTo ( 100 ) ;

// Second optional parameter specifies
// the animation duration in milliseconds.
// Scrolls to center in 500 ms:
scroller . scrollTo ( "center" , 500 ) ;

Elemento Haga clic en la devolución de llamada

Para manejar los clics en los elementos, especifique el controlador onItemClick en la configuración:

 const scroller = new Scroller ( {
  element : document . querySelector ( ".foo" ) ,
  onItemClick : ( event ) => {
    /* The `event` argument here is `TouchEvent` or `MouseEvent` depending on the user device. */
  } ,
} ) ;

Actualizaciones de configuración

Para las actualizaciones de configuración, use el método update :

 scroller . update ( {
  scrollbar : "hidden" ,
  navigation : "hidden" ,
  align : "center" ,
  onItemClick : someFunc ,
} ) ; 

Ejemplos

Scroller con barra de desplazamiento desactivado, navegación activa e inicio de alineación, configurado a través de html datos de datos:

 < head >
  < link href =" /path/to/prokrutchik/styles.css " rel =" stylesheet " />
  < script src =" /path/to/prokrutchik/browser.js " defer > </ script >
</ head >

< body >
  < ul class =" scroller " data-scrollbar =" hidden " data-align =" start " >
    < img src =" example.png " data-anchor =" anchor1 " />
    < div data-anchor =" anchor2 " > </ div >
    < table data-anchor =" anchor3 " > </ table >
    <!-- ... -->
  </ div >
</ body >

Scroller con la misma configuración configurada a través del objeto de configuración:

 import { Scroller } from "prokrutchik" ;
import "prokrutchik/styles.css" ;

const myScroller = new Scroller ( {
  el : document . querySelector ( ".foo" ) ,
  scrollbar : "hidden" ,
  align : "start" ,
} ) ; 

Componentes

Si desea usar Scroller con React o Vue, consulte estos paquetes:

• React Scroller
• Vue Scroller