jctk-page-preview-scrollbar

Page Preview Scrollbar

A scrollbar with current page preview for Vue2.

Demo

Demo Video

Installation

npm install -D jctk-page-preview-scrollbar
npm install @vue/composition-api

Usage

// main.js
import 'jctk-page-preview-scrollbar'
import 'jctk-page-preview-scrollbar/dist/jctk-page-preview-scrollbar.css'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

In your component.

<template>
    <PagePreviewScrollbar />
</template>

Why Composition API

Since some mechanism of vue & composition API.

The library deveoped with composition API seems can not run individually without it.

The detail is descriped here.

Configurations

Property	Type	Default	Description
isHideShorterHeight	Boolean	true	Automatically hide the scrollbar when screen is short.
isShowCloseButton	Boolean	true	Display the buton which can close scrollbar.
isAutoOpacity	Boolean	true	Make the scrollbar transparent.
persist	Boolean	true	Force the scrollbar always appeared/disappeared.
repaintAnimation	Boolean	true	Add transition animation when repaint.
isResizeAutoRepaint	Boolean	false	Auto repain when sceen height or width resizes.
disableRepaint	Boolean	false	Set true to avoid performance decreased by repainting.
zIndex	Number	100	css z-index.
targetSelector	String	"html"	The element used to preview.
elementToRmoveSelectors	Array	[]	The elements should not appear in scrollbar.
throttle	Number	25
debounceRepaint	Number	1000

Events

Event	Description
@repainted	Triggered when scrollbar repainted the preview.
@active	Triggered when scrollbar is active.
@inactive	Triggered when scrollbar is inactive.

Methods

Method	Description
Reset	Force the scrollbar repaint the preview.
ResetScroller	Force the scrollbar reset the screen position.