vue-fast-scroll

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

Demo

CodePen.io

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

Install

CDN

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vue-fast-scroll@0.0.6/dist/css/vue-fast-scoll.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-fast-scroll@0.0.6/dist/js/vue-fast-scroll.js"></script>
<script type="text/javascript">
    Vue.use(window.VueFastScroll)
</script>

NPM

npm install vue-fast-scroll
or
yarn add vue-fast-scroll

global

import Vue from 'vue'
import VueFastScroll from 'vue-fast-scroll'
import 'vue-fast-scroll/dist/css/vue-fast-scoll.css'

Vue.use(VueFastScroll)

local

import Vue from 'vue'
import { fastScroll } from 'vue-fast-scroll'
import 'vue-fast-scroll/dist/css/vue-fast-scoll.css'

export default {
  components: {
    fastScroll
  }
}

사용 설명

fast-scroll Component

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

<fast-scroll :key-list="fastScrollKeyList" :options="options">
  ...
</fast-scroll>

key-list Property

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

fastScrollKeyList = {
  {key: 'ㄱ', text: 'ㄱ'},
  {key: 'ㄴ', text: 'ㄴ'},
  {key: 'ㄷ', text: 'ㄷ'},
  {key: 'ㄹ', text: 'ㄹ'},
  {key: 'ㅁ', text: 'ㅁ'},
  {key: 'ㅂ', text: 'ㅂ'},
  {key: 'ㅅ', text: 'ㅅ'},
  {key: 'ㅇ', text: 'ㅇ'},
  {key: 'ㅈ', text: 'ㅈ'},
  {key: 'ㅊ', text: 'ㅊ'},
  {key: 'ㅋ', text: 'ㅋ'},
  {key: 'ㅌ', text: 'ㅌ'},
  {key: 'ㅍ', text: 'ㅍ'},
  {key: 'ㅎ', text: 'ㅎ'}
}

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

<div class="index-list">
  <ul>
    <li fast-scroll-key="ㄱ">ㄱ</li>
    <li fast-scroll-key="ㄴ">ㄴ</li>
    <li fast-scroll-key="ㄷ">ㄷ</li>
    <li fast-scroll-key="ㄹ">ㄹ</li>
    <li fast-scroll-key="ㅁ">ㅁ</li>
    <li fast-scroll-key="ㅂ">ㅂ</li>
    <li fast-scroll-key="ㅅ">ㅅ</li>
    <li fast-scroll-key="ㅇ">ㅇ</li>
    <li fast-scroll-key="ㅈ">ㅈ</li>
    <li fast-scroll-key="ㅊ">ㅊ</li>
    <li fast-scroll-key="ㅋ">ㅋ</li>
    <li fast-scroll-key="ㅌ">ㅌ</li>
    <li fast-scroll-key="ㅍ">ㅍ</li>
    <li fast-scroll-key="ㅎ">ㅎ</li>
  </ul>
</div>

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

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

options 프로퍼티

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

const options = {
  toggleDurationTime: 500,
  paddingScroll: 0
}

toggleDurationTime (default: 500)

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

paddingScroll (default: 0)

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

fast-scroll Component의 Slot

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

<fast-scroll>
  <ul slot="scrollList">
    ...
  </ul>
</fast-scroll>

fast-scroll-key Property

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

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

<fast-scroll>
  <ul slot="scrollList">
    <li :fast-scroll-key="'ㄱ'">김치</li>
    ...
  </ul>
</fast-scroll>

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