@zohodesk/hooks/es/scroll/useScrollStopper.js

Unified Component Library - Hooks

import { useRef, useEffect } from 'react';
export default function useScrollStopper(_ref) {
  let {
    element,
    getExcludeElements,
    isStop = false
  } = _ref;
  const scrollPos = useRef({
    x: 0,
    y: 0
  });
  useEffect(() => {
    if (!element) {
      return;
    } // function keyboardScroll(e) {
    //   let keys = [32, 37, 38, 39, 40];
    //   if(keys.indexOf(e.keyCode) != -1) {
    //     e.preventDefault();
    //     return false;
    //   }
    // }


    function handleWheel(e) {
      // Excluding Dropdown from stoping wheel event;
      if (typeof getExcludeElements === 'function') {
        const excludeElements = getExcludeElements() || [];
        let isElementContains = false;
        excludeElements.length > 0 && excludeElements.map(elem => {
          if (elem.contains(e.target)) {
            isElementContains = true;
          }
        });

        if (excludeElements.length > 0 && isElementContains) {
          return true;
        }
      }

      e.preventDefault(); // e.stopPropagation();

      return false;
    }

    ;

    function handleScroll(e) {
      e.preventDefault();
      element.scrollTo(scrollPos.current.x, scrollPos.current.y); // return false;
    }

    function cleanUp() {
      document.removeEventListener('wheel', handleWheel, {
        passive: false
      });
      document.removeEventListener('mousewheel', handleWheel, {
        passive: false
      }); // document.removeEventListener('keydown', keyboardScroll);

      element.removeEventListener('scroll', handleScroll, true);
    }

    if (isStop) {
      scrollPos.current = {
        x: element.scrollLeft,
        y: element.scrollTop
      };
      document.addEventListener('wheel', handleWheel, {
        passive: false
      });
      document.addEventListener('mousewheel', handleWheel, {
        passive: false
      }); // document.addEventListener('keydown', keyboardScroll);

      element.addEventListener('scroll', handleScroll, true);
    } else {
      cleanUp();
    }

    return cleanUp;
  }, [isStop]);
}