A Vue component that syncronize containers scroll positions

Overview

vue-scroll-sync

A Vue component that syncronize containers scroll positions

Installation

npm i --save vue-scroll-sync

Browser

Include the script file, then install the component with Vue.use(ScrollSync); e.g.:

<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-scroll-sync/dist/scroll-sync.min.js"></script>
<script type="text/javascript">
  Vue.use(ScrollSync);
</script>

Module

import ScrollSync from 'vue-scroll-sync';

Usage

Once installed, it can be used in a template as simply as:

<scroll-sync>
    Content
</scroll-sync>

Demo and Code Example

SSR

Create the plugins/vue-scroll-sync.js :

import Vue from 'vue'
import ScrollSync from 'vue-scroll-sync'

Vue.component('scroll-sync', ScrollSync)

Include plugin in your nuxt.config.js file:

module.exports = {
  plugins: ['~plugins/vue-scroll-sync']
}

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

  • react-scroll-sync for the scrolling position calculation and the method to prevent the event echo
You might also like...
A super simple Vue component that allows fullscreen and horizontal scroll snapping.
A super simple Vue component that allows fullscreen and horizontal scroll snapping.

Vue Scroll Snap A super simple Vue component that allows both fullscreen and horizontal scroll snapping. Showcase Check out the live demo to see the s

A scroll loading component for vue.js.

vue-scroll-loader 简体中文 A scroll loading component for vue.js. View demo Browsers Already use IntersectionObserver polyfill compatible with mainstream

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

Vue component to easily setup scroll-driven interactions (aka scrollytelling)
Vue component to easily setup scroll-driven interactions (aka scrollytelling)

Vue Scrollama A Vue component to easily setup scroll-driven interactions (aka scrollytelling). Uses Scrollama under the hood. The best way to understa

Scroll to page top button, Vue.js component.

vue-go-top Scroll to page top button, Vue.js component. Demo Demo Install Browser script src="vue.js"/script script src="vue-go-top.min.js"/scr

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

⚡️A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Vue-Pull-To A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

The Simplest Pretty Scroll Area Component with custom scrollbar for Vue 2.

Vue 2 Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue 2. It's based on react-scrollbar. All animation, Height and Width are

Vuejs-loadmore - A pull-down refresh and pull-up loadmore scroll component for Vue.js

vuejs-loadmore A pull-down refresh and pull-up loadmore scroll component for Vue.js. Easy to use by providing simple api. Unlike other component libra

Comments
  • "container" class name conflicts with CSS frameworks

    The template for this component uses a pretty general class name, container. This conflicts with CSS frameworks like Vuetify, Bulma, probably Bootstrap and others. It would be great to change this to something like scroll-sync-container to prevent these conflicts.

    opened by foundryspatial-duncan 1
Owner
null
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
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

Naufal Rabbani 117 Feb 23, 2022
Vue-loadmore - A pull-down refresh and pull-up loadmore scroll component for Vue.js

vuejs-loadmore A pull-down refresh and pull-up loadmore scroll component for Vue

staticdeng 53 Sep 21, 2022
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

Caio Fernandes 184 Aug 4, 2022
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

Mauricio Farias Dziedzinski 531 Sep 27, 2022
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

Honoré Nintunze 57 Mar 2, 2022
🎰 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.

William Lindvall 61 Feb 16, 2022
A scroll to top component for Vue 3

A scroll to top component for Vue 3

Willy Hong 4 Aug 26, 2021
Infinite scroll component created with Vue & sass

Vue Infinite-Scroll component With Futurama Characters <3 Demo Link Also works for mobile devices Project setup npm install Compiles and hot-reloads

Larissa Avila 0 Jan 12, 2021