v-scroll-sync is a vue directive, v-scroll-sync, that lets you keep the
scroll positions of multiple elements in sync.
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);
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>