HTML元素横向滚动

最新推荐文章于 2024-10-31 17:18:59 发布

原创最新推荐文章于 2024-10-31 17:18:59 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在TS版本的JavaScript中通过移除类型注解简化'initScroll'函数，实现横向滚动的事件监听和处理。

ts版的 js把类型去掉就行

/**
 * 横向滚动
 * @param domObj
 */
export function initScroll(domObj: HTMLElement) {
  domObj.addEventListener('mousewheel', handler, false);

  function handler(event: any) {
    // 获取滚动方向
    const detail = event.wheelDelta || event.detail;
    // 定义滚动方向，其实也可以在赋值的时候写
    const moveForwardStep = 1;
    const moveBackStep = -1;
    // 定义滚动距离
    let step = 0;
    // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
    if (detail < 0) {
      step = moveForwardStep * 100;
    } else {
      step = moveBackStep * 100;
    }
    // 对需要滚动的元素进行滚动操作
    domObj.scrollLeft += step;
  }
}