UNPKG

scroll-sync

Version:

Scroll synchronization (`scroll-sync`), which associates multiple elements with scroll properties (`overflow: scroll`). When a scroll event occurs in one of the elements, the scroll effect is mapped to all the elements associated with it. To achieve synch

1 lines 1.99 kB
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ScrollSync=t():e.ScrollSync=t()}(self,(function(){return e={138:e=>{const t=function(e){return[document,document.documentElement].includes(e)?document:e},o=function(e,...o){t(e).addEventListener(...o)},n=function(e,...o){t(e).removeEventListener(...o)};e.exports=class{constructor(e={}){const{disabled:t=!1,relative:o=!0,doms:n=[]}=e;this.doms=[...n],this.disabled=t,this.relative=o,this.syncData=[],this.autoSync()}add(e=[]){if(!e&&!e.length)throw Error("Please enter the element or element group.");this.clearSync(),this.doms=this.doms.concat(e),this.autoSync()}remove(e=[]){if(!e&&!e.length)throw Error("Please enter the element or element group.");const t=[].concat(e);this.clearSync(),this.doms=this.doms.filter((e=>!t.includes(e))),this.autoSync()}set(e=[]){if(!e&&!e.length)throw Error("Please enter the element or element group.");this.clearSync(),this.doms=[].concat(e),this.autoSync()}clearSync(){this.syncData.forEach((e=>{n(e.el,"scroll",e.event)})),this.syncData=[]}autoSync(){this.clearSync(),this.doms.forEach(((e,t)=>{const r=e=>{if(this.disabled)return;const{scrollWidth:t,scrollHeight:r,scrollLeft:l,scrollTop:s,clientWidth:c,clientHeight:i}=e.target.documentElement||e.target;this.syncData.filter((t=>t.el!==e.target)).forEach((a=>{if(clearTimeout(a.timer),n(a.el,"scroll",a.event),this.relative){const e=l/(t-c),o=s/(r-i),{scrollWidth:n,scrollHeight:h,clientWidth:d,clientHeight:m}=a.el.documentElement||a.el;(a.el.documentElement||a.el).scrollTo((n-d)*e,(h-m)*o)}else(a.el.documentElement||a.el).scrollTo(e.target.scrollLeft,e.target.scrollTop);a.timer=setTimeout((()=>{o(a.el,"scroll",a.event)}),50)}))};this.syncData.push({el:e,event:r}),o(e,"scroll",r)}))}}}},t={},function o(n){var r=t[n];if(void 0!==r)return r.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,o),l.exports}(138);var e,t}));