Synchronize scroll position of array of dom elements

syncScroll.js

// synchronize scrollTop value between multiple dom elements
export const syncScroll = elements => {

  const syncElements = (collection, value) => {
    collection.forEach(item =>
      item.el.scrollTop = (item.el.scrollHeight - item.el.clientHeight) * value,
    );
  };
  const handleNativeScroll = ({currentTarget}) => {
    const v = currentTarget.scrollTop / (currentTarget.scrollHeight - currentTarget.clientHeight);
    syncElements(elements.filter(item => item.el !== currentTarget), v);
  };
  const attachHandler = (el) => el.addEventListener('scroll', handleNativeScroll);
  const removeHandler = (el) => el.removeEventListener('scroll', handleNativeScroll);

  elements.forEach(item => {
    item.context.addEventListener('mouseenter', attachHandler.bind(null, item.el));
    item.context.addEventListener('mouseleave', removeHandler.bind(null, item.el));
  });

  // unbind all listeners
  const destroy = () => {
    elements.forEach(item => {
      item.context.removeEventListener('mouseenter', attachHandler);
      item.context.removeEventListener('mouseleave', removeHandler);
      item.el.removeEventListener('scroll', handleNativeScroll);
    });
  };

  return {destroy};
};


/**
  {
    el: domElement to scroll
    context: eiteher el itself or parent element where mouseenter event will be caught
  }
*/
syncScroll([
  {
    el: document.getElementById('scroll1');
    context: document.getElementById('scroll1');
  }
]);