Scroll auto for list.

Related tags

Scroll v-scroll-auto
Overview

v-scroll-auto

Scroll auto for list.

Usage

Install

npm install --save v-scroll-auto

Global registration

import Vue from "vue";
import ScrollAuto from "v-scroll-auto";

Vue.use(ScrollAuto);

In-component registration

import ScrollAuto from "v-scroll-auto";

export default {
  directives: {
    ScrollAuto
  }
};

Directive Attrs

  • value - target element, example:
      ...
  • modifier x - use x axis, example:
      ...
  • argument - speed, example:

    Complete example

  • {{ item }}
    • {{ item }}
    ">
    <template>
      <div>
        <label>Default:label>
        <ul class="cm-list-unstyled cm-padding-medium" v-scroll-auto>
          <li class="cm-margin-top-base" v-for="item in 5" :key="item">
            <el-button>{{ item }}el-button>
          li>
        ul>
        <label>speed = 5, axis = x:label>
        <ul
          class="cm-list-unstyled cm-flex cm-padding-large cm-border-base"
          v-scroll-auto:5.x
        >
          <li v-for="item in 10" :key="item">
            <el-button style="width: 200px;" type="primary">{{ item }}el-button>
          li>
        ul>
      div>
    template>
    
    <script>
    import { ScrollAuto } from "v-scroll-auto";
    
    export default {
      directives: {
        ScrollAuto
      }
    };
    script>
    You might also like...
    A Back-to-top component for Vue.js, which scroll page to the top when clicked

    Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

    Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

    vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

    Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

    navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

    A tiny Vue directive that stop propagation scroll when edge reached
    A tiny Vue directive that stop propagation scroll when edge reached

    vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events βœ… On ❌

    The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

    Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

    (πŸ—ƒοΈ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

    πŸ—ƒοΈ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

    🎰 Scroll-in text component for Vue
    🎰 Scroll-in text component for Vue

    Scroll-in text component for Vue 'vue-scrollin' is a Vue component that scrolls through various characters on mount before revealing the correct text.

    nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

    Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

    A scroll to top component for Vue 3
    A scroll to top component for Vue 3

    A scroll to top component for Vue 3

    A vue directive to make a scrollable element scroll by draging to the scroll direction

    vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

    null 223 Sep 9, 2022
    Vue Scroll Show - Showing the element if the user reached it after scroll

    Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

    Aleksey Pleshkov 10 Jan 5, 2022
    πŸ“œ Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

    vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

    Yunwei Xiao 155 Jul 16, 2022
    πŸ“œ Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

    vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

    Yunwei Xiao 155 Jul 16, 2022
    Infinite scroll list for Vue.js with DOM recycling.

    vue-recyclist (not maintained) Infinite scroll list for Vue.js (v2.1+) with DOM recycling. Demo Installation npm install -D vue-recyclist Import impor

    Tong 263 Jul 18, 2022
    Vue 3 Scroll Shadow - Add UX-friendly shadow to your scrollable list

    Vue 3 Scroll Shadow Add UX-friendly shadow to your scrollable list Installation npm i vue3-scroll-shadow Usage import VueScrollShadow from 'vue3-scrol

    null 0 Jun 30, 2021
    Bring your scroll game to the next level!

    VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

    Developmint GbR 49 Mar 2, 2021
    A Vue component that syncronize containers scroll positions

    vue-scroll-sync A Vue component that syncronize containers scroll positions Installation npm i --save vue-scroll-sync Browser Include the script file,

    null 26 Jul 15, 2022
    A Vue.js directive for body scroll locking without breaking scrolling of a target element.

    v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

    Pete Hegman 182 Oct 1, 2022
    Vue.js plugin for page scroll progress bar

    vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

    Guillaume Briday 84 Aug 29, 2022