Download scroller - Download do código fonte scroller

scroller

Outro código-fonte

v3.0.2

Baixar

Pergaminho

Rollo de conteúdo rápido, leve (4KB GZIP) e sem dependência.

exemplo.mp4

Para obter mais exemplos de como funciona com diferentes configurações e condições da interface do usuário, consulte este link.

Instalação

Instale o Scroller com NPM:

npm install prokrutchik

Adicione os scripts e estilos ao seu projeto:

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

Ou adicione -os diretamente ao arquivo html:

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

Inicialização

Por padrão, o Scroller fornece inicialização automática para todos os elementos .scroller na página:

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

Você também pode inicializar a instância 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 >

Configuração

Você pode configurar o roller via atributos data- no HTML:

data-navigation , mostra/oculta os botões de navegação, "visible" | "hidden" ;
data-scrollbar , mostra/oculta a barra de rolagem sob o conteúdo "visible" | "hidden" ;
data-align , especifica como alinhar o conteúdo se ele se encaixar na tela, "start" | "center" | "end" ;
data-start-position , posição inicial do conteúdo, number of px | "start" | "center" | "end" ;
data-start-duration , duração inicial da animação, number of milliseconds .

Os itens de rolante podem ser configurados com:

data-anchor , etiqueta do item na navegação, string ;
data-focused , se definida, o roller rolará para este item no início.

Usando JavaScript

Você também pode configurar o Scroller usando o objeto Config:

 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

O Scroller fornece API para alterar a posição atual, o item de manuseio cliques e atualizando dinamicamente a configuração.

Mudança de posição

Para mudança de posição, use o 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 ) ;

Item Clique em retorno de chamada

Para lidar com os cliques nos itens, especifique o manipulador onItemClick na configuração:

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

Atualizações de configuração

Para atualizações de configuração, use o método update :

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

Exemplos

Scroller com barra de rolagem desativada, navegação ativa e alinhamento inicial, configurado por meio de atributos de dados HTML:

 < 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 >

Roller com as mesmas configurações configuradas via objeto de configuração:

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

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