t-comm/lib/wheel/wheel.js

专业、稳定、纯粹的工具库

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

/**
 * 使用鼠标滚轮控制元素的scrollLeft实现左右移动
 * @param {HTMLElement} element - 需要控制移动的DOM元素
 * @param {Object} [options] - 配置选项
 * @param {number} [options.speed=50] - 移动速度（像素/滚动单位）
 * @param {boolean} [options.preventDefault=true] - 是否阻止默认滚动行为
 * @param {boolean} [options.invertDirection=false] - 是否反转滚动方向
 * @example
 * ```ts
 * // 基础用法：让横向滚动容器支持鼠标滚轮横向滚动
 * const el = document.querySelector('.scroll-container') as HTMLElement;
 * const dispose = enableHorizontalScroll(el);
 *
 * // 自定义速度和方向
 * enableHorizontalScroll(el, {
 *   speed: 100,
 *   invertDirection: true,
 * });
 *
 * // 不阻止默认滚动行为（页面仍可垂直滚动）
 * enableHorizontalScroll(el, { preventDefault: false });
 *
 * // 组件销毁时取消监听
 * dispose?.();
 * ```
 */
function enableHorizontalScroll(element) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  if (!element) return;
  // 合并默认选项
  var config = Object.assign({
    speed: 50,
    preventDefault: true,
    invertDirection: false
  }, options);
  // 处理滚轮事件
  function handleWheel(e) {
    // 阻止默认的垂直滚动行为
    if (config.preventDefault) {
      e.preventDefault();
    }
    // 计算滚轮方向（兼容不同浏览器）
    var delta = Math.sign(e.deltaY || e.wheelDelta || -e.detail);
    // 如果需要反转方向
    if (config.invertDirection) {
      delta = -delta;
    }
    // 计算新的scrollLeft位置
    var newScrollLeft = element.scrollLeft + delta * config.speed;
    // 应用滚动
    element.scrollLeft = newScrollLeft;
  }
  // 添加事件监听
  element.addEventListener('wheel', handleWheel, {
    passive: false
  });
  // 返回一个取消监听的函数
  return function disableHorizontalScroll() {
    element.removeEventListener('wheel', handleWheel);
  };
}

exports.enableHorizontalScroll = enableHorizontalScroll;