src/utils/helpers/scroll.js

/**
 * @param e
 */
function preventDefault(e) {
  e.preventDefault();
}

// modern Chrome requires { passive: false } when adding event
let supportsPassive = false;
try {
  window.addEventListener(
    "test",
    null,
    Object.defineProperty({}, "passive", {
      get() {
        supportsPassive = true;
      },
    }),
  );
} catch (error) {
  console.error(error);
}

const wheelOpt = supportsPassive ? {passive: false} : false;
const wheelEvent =
  "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";

// call this to Disable
/**
 *
 */
function disableScroll() {
  window.addEventListener("DOMMouseScroll", preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
}

// call this to Enable
/**
 *
 */
function enableScroll() {
  window.removeEventListener("DOMMouseScroll", preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
}

// onWheel event will use scrollingRef to scroll referenced DOM element
/**
 * @param e
 * @param scrollingRef
 */
function onWheelHandler(e, scrollingRef) {
  const container = scrollingRef.current;
  const containerScrollPosition = scrollingRef.current.scrollLeft;
  let delta = e.deltaY;
  if (navigator.userAgent.indexOf("Firefox") !== -1) {
    delta *= 100;
  } else {
    delta *= 2;
  }
  container.scrollTo({
    behavior: "smooth",
    left: containerScrollPosition + delta,
    top: 0,
  });
}

export {disableScroll, enableScroll, onWheelHandler};

export default {
  disableScroll,
  enableScroll,
  onWheelHandler,
};