Vue-scrollable-container NPM

vue-scrollable-container

A Vue.js component to show scrollable hint.

From v2.0.0, it works for Vue 3.

Demo

Install

Browser

<script src="vue.global.prod.js"></script>
<script src="https://unpkg.com/throttle-debounce@5/umd/index.js"></script>
<script src="vue-scrollable-container.umd.js"></script>

npm

npm install --save vue-scrollable-container

Usage

Browser

<div id="app">
  <scrollable-container>
    Something
  </scrollable-container>
</div>

<script src="vue.global.prod.js"></script>
<script src="https://unpkg.com/throttle-debounce@5/umd/index.js"></script>
<script src="vue-scrollable-container.umd.js"></script>
<script>
const { createApp } = Vue;
const { ScrollableContainer } = SwsVueScrollableContainer;

createApp({
  components: {
    ScrollableContainer,
  },
}).mount('#app');
</script>

SFC (TypeScript)

<template>
  <scrollable-container>
    Something
  </scrollable-container>
</template>

<script setup lang="ts">
import { ScrollableContainer } from 'vue-scrollable-container';
</script>

Props

Props	Type	Default	Description
`size`	`Number`	`100`	Notification box size(px)
`theme`	`String`	`"light"`	Inner content theme color
`label`	`String`	`"scrollable"`	Notification text
`is-vertical`	`Boolean`	`false`	Scroll direction
`shadow-from-x`	`String`	`"0"`	Left position of first shadow
`shadow-to-x`	`String`	`"0"`	Right position of last shadow