scroller 다운로드 - scroller 소스 코드 다운로드

scroller

기타 소스코드

v3.0.2

다운로드

스크롤러

빠르고 가벼운 가중 (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 요소에 대한 자동 초기화를 제공합니다.

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

스크롤러는 현재 위치 변경, 항목 클릭 처리 및 구성을 동적으로 업데이트하기위한 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 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 >

구성 객체를 통해 구성된 동일한 설정이있는 스크롤러 :

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

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