VueBar

대분류

라이브러리

소분류

JS Library

설명

스크롤 디자인 변경

유형

Vue

주요 레퍼런스

github.serafin.io/vuebar/

프레임워크

Vue

언어

최종 편집 일시

2024/10/31 03:26

생성 일시

2024/01/05 07:12

11 more properties

설명

Scroll 디자인 커스텀

설치

npm install vuebar --save
JavaScript
복사

사용법

•

script

import Vue from 'vue'
import Vuebar from 'vuebar';
Vue.use(Vuebar)
JavaScript
복사

•

html

<template>
  <div>
    <div v-bar class="word-box jejumyeongjo">
      <div>
	      <H2>선인장 (Duet)</H2>
	      <p>소리 없이 머금고 있을게</p>
	      <p>봄에 서 있을게</p>
      </div>
    </div>
  </div>
</template>
JavaScript
복사

•

css

<style>
  .vb > .vb-dragger {
    z-index: 5;
    width: 12px;
    right: 0;
  }

  .vb > .vb-dragger > .vb-dragger-styler {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotate3d(0,0,0,0);
    transform: rotate3d(0,0,0,0);
    -webkit-transition:
            background-color 100ms ease-out,
            margin 100ms ease-out,
            height 100ms ease-out;
    transition:
            background-color 100ms ease-out,
            margin 100ms ease-out,
            height 100ms ease-out;
    background-color: rgba(244, 88, 88,.1);  // 원하는색상
    margin: 5px 5px 5px 0;
    border-radius: 20px;
    height: calc(100% - 10px);
    display: block;
  }
  .vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(244, 88, 88,.3); // 원하는색상
  }
  .vb > .vb-dragger:hover > .vb-dragger-styler {
    background-color: rgba(244, 88, 88,.5); // 원하는색상
    margin: 0px;
    height: 100%;
  }
  .vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(244, 88, 88,.5); // 원하는색상
    margin: 0px;
    height: 100%;
  }
  .vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(244, 88, 88,.5); // 원하는색상
  }
</style>
JavaScript
복사

VueBar

설명

설치

사용법

예시