dom-scrollsync

dom scrollsync

Usage no npm install needed!

<script type="module">
  import domScrollsync from 'https://cdn.skypack.dev/dom-scrollsync';
</script>

README

dom-scrollsync

npm version downloads JavaScript Style Guide ecoonline

Simple dynamic dom scrollsync

Usage

You can easily add syncscroll to existing dom structures, by hooking onto classes and id.

<div>
  <div id="#left">
    <div class="marker" data-key="1">Lorem<div>
    <div class="marker" data-key="2">Ipsum<div>
    <div class="marker" data-key="3">Gotsum<div>
  </div>
  <div id="#right">
    <div class="marker" data-key="1">Lorem<div>
    <div class="marker" data-key="2">Ipsum<div>
    <div class="marker" data-key="3">Gotsum<div>
  </div>
</div>
var ScrollSync = require('dom-scrollsync')

var scrollsync = ScrollSync({
  offset: 30,
  containers: ['#left', '#right'],
  markers: '.marker'
})

// now... call this everytime you think that your content might have changed. Its ok... its cheap.
scrollsync.update()