scroller

Scroller

Cepat, ringan (4KB GZIP), dan scroller konten bebas ketergantungan.

example.mp4

Untuk lebih banyak contoh cara kerjanya dengan pengaturan yang berbeda dan kondisi UI, lihat tautan ini.

Instalasi

Instal Scroller dengan NPM:

npm install prokrutchik

Tambahkan skrip dan gaya ke proyek Anda:

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

Atau tambahkan langsung ke file html:

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

Inisialisasi

Secara default, scroller menyediakan inisialisasi otomatis untuk semua elemen .scroller pada halaman:

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

Anda juga dapat menginisialisasi instance secara manual:

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

Konfigurasi

Anda dapat mengonfigurasi scroller melalui data- atribut di html:

• data-navigation , menunjukkan/menyembunyikan tombol navigasi, "visible" | "hidden" ;
• data-scrollbar , menunjukkan/menyembunyikan scrollbar di bawah konten, "visible" | "hidden" ;
• data-align , menentukan cara menyelaraskan konten jika sesuai dengan layar, "start" | "center" | "end" ;
• data-start-position , POSISI AWAL Konten, number of px | "start" | "center" | "end" ;
• data-start-duration , Durasi Animasi Mulai, number of milliseconds .

Item gulir dapat dikonfigurasi dengan:

• data-anchor , label item dalam navigasi, string ;
• Gulir data-focused , jika didefinisikan, akan menggulir ke item ini di awal.

Menggunakan JavaScript

Anda juga dapat mengonfigurasi scroller menggunakan objek konfigurasi:

 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 Publik

Scroller menyediakan API untuk mengubah posisi saat ini, menangani klik item, dan memperbarui konfigurasi secara dinamis.

Perubahan posisi

Untuk perubahan posisi, gunakan metode 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 klik panggilan balik

Untuk menangani klik pada item, tentukan handler onItemClick di konfigurasi:

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

Konfigurasi pembaruan

Untuk pembaruan konfigurasi, gunakan metode update :

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

Contoh

Scroller dengan scrollbar yang dinonaktifkan, navigasi aktif, dan mulai penyelarasan, dikonfigurasi melalui atribut data 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 >

Scroller dengan pengaturan yang sama dikonfigurasi melalui objek konfigurasi:

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

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

Komponen

Jika Anda ingin menggunakan scroller dengan React atau Vue, lihat paket ini:

• Bereaksi Scroller
• Vue Scroller