syncroScroll.ts 968 B

123456789101112131415161718192021
  1. type scrollingDirection = "v" | "h" | "vh" | "hv" ;
  2. export default function syncronizeElementsScrolling(elements:Array<HTMLBaseElement>, direction:scrollingDirection = "vh"):void{
  3. let activeScroller:HTMLElement | null = null;
  4. const bSyncroV = direction.indexOf("v") > -1 ;
  5. const bSyncroH = direction.indexOf("h") > -1 ;
  6. const applyListener = function(element:HTMLBaseElement) {
  7. element.addEventListener("mouseenter", function(e:MouseEvent) {
  8. activeScroller = e.target as HTMLElement;
  9. });
  10. element.addEventListener("scroll", function(e:Event) {
  11. if (e.target !== activeScroller) return;
  12. elements.forEach(function(element) {
  13. if (activeScroller === element || activeScroller === null) return;
  14. if (bSyncroV) element.scrollTop = activeScroller.scrollTop;
  15. if (bSyncroH) element.scrollLeft = activeScroller.scrollLeft;
  16. });
  17. });
  18. }
  19. elements.forEach(applyListener)
  20. }