scroller Download - scroller Source Source Download

scroller

ซอร์สโค้ดอื่น ๆ

v3.0.2

ดาวน์โหลด

เครื่องเลื่อน

เร็วน้ำหนักเบา (4KB GZIP) และตัวเลื่อนเนื้อหาที่ไม่ต้องพึ่งพา

ตัวอย่าง. mp4

สำหรับตัวอย่างเพิ่มเติมเกี่ยวกับวิธีการทำงานกับการตั้งค่าที่แตกต่างกันและเงื่อนไข UI ลองดูลิงค์นี้

การติดตั้ง

ติดตั้ง Scroller ด้วย NPM:

npm install prokrutchik

เพิ่มสคริปต์และสไตล์ในโครงการของคุณ:

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

หรือเพิ่มโดยตรงไปยังไฟล์ HTML:

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

การเริ่มต้น

โดยค่าเริ่มต้น Scroller ให้การกำหนดค่าเริ่มต้นอัตโนมัติสำหรับองค์ประกอบ .scroller ทั้งหมดในหน้า:

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

คุณยังสามารถเริ่มต้นอินสแตนซ์ด้วยตนเอง:

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

การกำหนดค่า

คุณสามารถกำหนดค่า Scroller ผ่าน data- แอตทริบิวต์ใน HTML:

data-navigation แสดง/ซ่อนปุ่มนำทาง "visible" | "hidden" ;
data-scrollbar แสดง/ซ่อนแถบเลื่อนใต้เนื้อหา "visible" | "hidden" ;
data-align ระบุวิธีการจัดเรียงเนื้อหาหากเหมาะกับหน้าจอ "start" | "center" | "end" ;
data-start-position ตำแหน่งเริ่มต้นของเนื้อหา number of px | "start" | "center" | "end" ;
data-start-duration เวลาการเริ่มต้นภาพเคลื่อนไหว number of milliseconds

สามารถกำหนดค่ารายการ Scroller ด้วย:

data-anchor , ฉลากของรายการในการนำทาง, string ;
หาก data-focused หากกำหนดไว้แล้ว Scroller จะเลื่อนไปที่รายการนี้ในตอนเริ่มต้น

ใช้ JavaScript

นอกจากนี้คุณยังสามารถกำหนดค่า Scroller โดยใช้วัตถุ 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 สาธารณะ

Scroller ให้ API สำหรับการเปลี่ยนตำแหน่งปัจจุบันการจัดการการคลิกรายการและการอัปเดตการกำหนดค่าแบบไดนามิก

การเปลี่ยนตำแหน่ง

สำหรับการเปลี่ยนแปลงตำแหน่งให้ใช้วิธี 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 ) ;

รายการคลิกโทรกลับ

สำหรับการจัดการการคลิกบนรายการให้ระบุตัวจัดการ onItemClick ในการกำหนดค่า:

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

กำหนดค่าการอัปเดต

สำหรับการอัปเดตการกำหนดค่าใช้วิธี update :

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

ตัวอย่าง

Scroller พร้อมแถบเลื่อนปิดใช้งานการนำทางที่ใช้งานอยู่และเริ่มการจัดตำแหน่งกำหนดค่าผ่าน 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 >

Scroller ที่มีการตั้งค่าเดียวกันที่กำหนดค่าผ่านวัตถุ config:

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

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