vue-scrollable-container

A Vue.js component to show scrollable hint.

From v2.0.0, it works for Vue 3.

Demo

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 |

License

MIT

Author

inotom