vue-fast-scroll

모바일의 Fast Scroll 기능을 Web 기반의 Vue.js에서 지원하기 위한 플러그인입니다.

Demo

CodePen.io

example 디렉토리 밑에 예제 파일로도 확인 할 수 있습니다.

Install

CDN

NPM

global

local

사용 설명

fast-scroll Component

fast-scroll 컴포넌트를 사용하여 그 안에 fast scroll을 지원해야 될 엘리먼트를 선언합니다. fast-scroll 컴포넌트는 key-list 프로퍼티와 options 프로퍼티를 가집니다.

key-list Property

key-list 프로퍼티로 전달 되어야 할 값은 key와 text를 쌍으로 가지는 객체입니다.

위의 코드와 같이 key-list를 구성한다면, HTML에는

위의 HTML이 랜더링 됩니다. 이 엘리먼트를 인덱스 리스트라고 하도록 하겠습니다. 인덱스 리스트는 fast scroll key 목록을 리스트로 나타내는 엘리먼트 입니다.

fast-scroll-key에는 key-list 프로퍼티 리스트 아이템의 key 값이 되고, li 태그의 문자열은 key-list 프로터티 리스트 아이템의 text가 됩니다.

options 프로퍼티

Fast Scroll의 옵션 설정 프로퍼티입니다.

toggleDurationTime (default: 500)

Fast Scroll 시 어느 위치로 이동했는지 나타내는 토글 텍스트의 유지시간을 설정 합니다. 단위는 ms입니다.

paddingScroll (default: 0)

Fast Scroll 시 타겟 위치보다 얼마나 더 스크롤 할 것인지 설정 합니다.

fast-scroll Component의 Slot

fast-scroll 컴포넌트의 자식 컴포넌트로 scrollList라는 이름을 가지는 Slot을 정의해야 합니다. 이 Slot은 스크롤 될 엘리먼트가 됩니다. 이 엘리먼트를 스크롤 리스트라고 하도록 하겠습니다.

fast-scroll-key Property

fast-scroll-key 프로퍼티는 스크롤 리스트 각각의 아이템에 선언되어야 하는 프로퍼티입니다.

fast-scroll 컴포넌트의 key-list 프로퍼티에 정의 된 key와 fast-scroll 컴포넌트의 하위 컴포넌트에 정의 된 fast-scroll-key가 매칭 되는 엘리먼트를 찾아 스크롤 되게 됩니다.

Style

.scroll-list

Fast Scroll로 스크롤 될 스크롤 리스트의 스타일 클래스(<div class="scroll-list"></div>)입니다.

.index-list

Fast Scroll 할 key과 text로 구성된 인덱스 리스트의 스타일 클래스(<div class="index-list"><ul>...</ul></div>)입니다.

.fast-scroll-toggle

어느 위치로 스크롤 되었는지 나타내는 문자열의 스타일 클래스(<div class="fast-scroll-toggle"></div>) 입니다.

.fade-leave-active, .fade-leave-to

어느 위치로 스크롤 되었는지 나타내는 문자열의 fade Animation 스타일 클래스 입니다.

Author

Hyo Bum Lee