@fesjs/fes-design/es/_util/use/useScrollX.js

fes-design for PC

import { onMounted, onBeforeUnmount } from 'vue';

function useScrollX(targetRef) {
  function handleWheelEvent(event) {
    const currentTarget = event.currentTarget;
    if (!currentTarget) {
      return;
    }
    const preventYWheel = currentTarget.offsetWidth < currentTarget.scrollWidth;
    if (!preventYWheel || event.deltaY === 0) {
      return;
    }
    currentTarget.scrollLeft += event.deltaY + event.deltaX;
    event.preventDefault();
  }
  function scrollTo(options) {
    var _targetRef$value;
    (_targetRef$value = targetRef.value) === null || _targetRef$value === void 0 || _targetRef$value.scrollTo(options);
  }
  onMounted(() => {
    targetRef.value.addEventListener('wheel', handleWheelEvent);
  });
  onBeforeUnmount(() => {
    targetRef.value.removeEventListener('wheel', handleWheelEvent);
  });
  return {
    scrollTo
  };
}

export { useScrollX as default };