scroller

Parasites

Fast, Light-Weight (4KB GZIP) et Scroller de contenu sans dépendance.

exemple.mp4

Pour plus d'exemples de la façon dont cela fonctionne avec différents paramètres et conditions d'interface utilisateur, consultez ce lien.

Installation

Installez le défilement avec NPM:

npm install prokrutchik

Ajoutez les scripts et les styles à votre projet:

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

Ou ajoutez-les directement au fichier html:

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

Initialisation

Par défaut, Scroller fournit une initialisation automatique pour tous les éléments .scroller

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

Vous pouvez également initialiser l'instance manuellement:

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

Configuration

Vous pouvez configurer un défilement via des attributs data- dans HTML:

• data-navigation , montre / cache les boutons de navigation, "visible" | "hidden" ;
• data-scrollbar , montre / cache la barre de défilement sous le contenu, "visible" | "hidden" ;
• data-align , spécifie comment aligner le contenu s'il s'adapte à l'écran, "start" | "center" | "end" ;
• data-start-position , position initiale du contenu, number of px | "start" | "center" | "end" ;
• data-start-duration , durée d'animation de démarrage, number of milliseconds .

Les éléments de défilement peuvent être configurés avec:

• data-anchor , étiquette de l'élément dans la navigation, string ;
• data-focused , s'il est défini, le défilement défilera vers cet élément au début.

Utilisation de JavaScript

Vous pouvez également configurer un défilement à l'aide de l'objet 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 publique

Scroller fournit une API pour modifier la position actuelle, gérer les clics de l'élément et mettre à jour dynamiquement la configuration.

Changement de position

Pour le changement de position, utilisez la méthode 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 ) ;

Rappel de clic de l'article

Pour gérer les clics sur les éléments, spécifiez le gestionnaire onItemClick dans la configuration:

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

Mises à jour de configuration

Pour les mises à jour de la configuration, utilisez la méthode update :

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

Exemples

Scroller avec barre de défilement désactivée, navigation active et démarrage de l'alignement, configuré via HTML Data-Attributes:

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

Défilement avec les mêmes paramètres configurés via l'objet config:

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

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

Composants

Si vous souhaitez utiliser un défilement avec React ou Vue, consultez ces packages:

• Réactif
• Vue Scroller