Skip to content

imarc/v-scroll-sync

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

v-scroll-sync

v-scroll-sync is a vue directive, v-scroll-sync, that lets you keep the scroll positions of multiple elements in sync.

Getting Started

Install via NPM (or yarn or such):

$ npm install v-scroll-sync

Import it in your code (or require it):

import Vue from 'vue';
import VScrollSync from 'v-scroll-sync';
Vue.use(VScrollSync);

Usage

The most basic usage is like this:

<div v-scroll-sync> ... </div>
<div v-scroll-sync> ... </div>

If you add this on two scroll elements, it'll keep the percentage scrolled in each direction in sync across all elements with this directive.

You can optionally specify name the group, in case you need multiple groups:

<div v-scroll-sync:groupname> ... </div>
<div v-scroll-sync:groupname> ... </div>
<div v-scroll-sync:anothergroup> ... </div>
<div v-scroll-sync:anothergroup> ... </div>

The directive also supports two modifiers, .x and .y, which can be used to only synchronize scrollLeft or scrollTop respectively:

<div v-scroll-sync.x> ... </div>
<div v-scroll-sync:foobar.x> ... </div>

Lastly, if you want to do something totally custom, you can set the directive's value to your own function:

<div v-scroll-sync:madness="(el, target) => target.scrollTop = el.scrollLeft"> ... </div>
<div v-scroll-sync:madness="(el, target) => target.scrollLeft = el.scrollTop"> ... </div>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published