scroller

滾動器

快速，輕巧（4KB GZIP）和無依賴性內容滾動器。

示例.mp4

有關它如何在不同的設置和UI條件下工作的更多示例，請查看此鏈接。

安裝

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

配置

您可以通過html中的data-屬性配置滾動器：

• data-navigation ，顯示/隱藏導航按鈕， "visible" | "hidden" ；
• data-scrollbar顯示/隱藏了內容"visible" | "hidden"中的滾動條"visible" | "hidden" ；
• data-align ，指定內容如何適合屏幕， "start" | "center" | "end" ;
• data-start-position ，內容的初始位置， number of px | "start" | "center" | "end" ;
• data-start-duration ，啟動動畫持續時間， number of milliseconds 。

可以配置滾動器項目：

• data-anchor ，導航中的項目標籤， string ；
• 以data-focused如果定義）滾動器將在開始時滾動到此項目。

使用JavaScript

您還可以使用配置對象配置滾動器：

 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 ,
} ) ; 

例子

帶有禁用的滾動欄，活動導航和啟動對齊的滾動器，該滾動器通過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 >

通過配置對象配置的相同設置的滾動器：

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

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

成分

如果要使用scroller和react或vue，請查看以下包：

• React Scroller
• vue滾動器