AngularJS中如何分别识别上、右、下、左方向的滚动事件

我来帮你捋清楚怎么实现这个需求——让表格的上下左右滚动事件，和原来的点击操作触发一样的固定行列效果，思路大概是这样的：

1. 先拆解原有指令的核心逻辑 #

首先你得先摸透原来点击按钮时，是怎么触发行列固定的。比如点击「上」按钮是不是调用了fixTopRows()？点击「右」按钮是不是调用了fixRightColumns()？把原有指令里处理点击事件的核心函数抽离出来，确保这些函数是可以独立调用的，而不是和点击事件绑定死的。

举个例子，假设原有指令里有这些可复用的方法：

• handleUpAction()：处理向上固定行的逻辑
• handleRightAction()：处理向右固定列的逻辑
• handleDownAction()：处理向下固定行的逻辑
• handleLeftAction()：处理向左固定列的逻辑

这些就是你要通过滚动事件触发的目标函数，先确认它们能正常独立执行。

2. 给滚动容器添加方向判断的监听 #

接下来，给表格的滚动容器（比如包裹表格的div，或者表格本身如果是可滚动的）添加scroll事件监听，关键是要区分水平/垂直滚动，还要判断滚动方向：

// 假设你的滚动容器是这个元素
const scrollContainer = document.querySelector('.table-scroll-container');
// 记录上一次的滚动位置，用来判断方向
let lastScrollTop = scrollContainer.scrollTop;
let lastScrollLeft = scrollContainer.scrollLeft;

scrollContainer.addEventListener('scroll', function() {
  const currentTop = scrollContainer.scrollTop;
  const currentLeft = scrollContainer.scrollLeft;

  // 处理垂直方向（上/下）滚动
  if (currentTop > lastScrollTop) {
    // 向下滚动，触发原有向下点击的逻辑
    handleDownAction();
  } else if (currentTop < lastScrollTop) {
    // 向上滚动，触发原有向上点击的逻辑
    handleUpAction();
  }

  // 处理水平方向（左/右）滚动
  if (currentLeft > lastScrollLeft) {
    // 向右滚动，触发原有向右点击的逻辑
    handleRightAction();
  } else if (currentLeft < lastScrollLeft) {
    // 向左滚动，触发原有向左点击的逻辑
    handleLeftAction();
  }

  // 更新上次滚动位置，供下次判断使用
  lastScrollTop = currentTop;
  lastScrollLeft = currentLeft;
});

3. 优化滚动触发频率（避免频繁调用） #

上面的代码会因为滚动时连续触发scroll事件，导致固定逻辑被频繁调用，既影响性能又可能出现异常。你可以用防抖函数来限制触发频率，比如设置300ms的间隔，只有当滚动停止300ms后才执行逻辑：

// 防抖函数封装
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 把滚动事件处理函数包上防抖
scrollContainer.addEventListener('scroll', debounce(function() {
  // 这里放上面的滚动方向判断和触发逻辑
}));

4. 克隆指令并整合滚动逻辑 #

现在你可以克隆原有指令，把上面的滚动监听逻辑整合进去。如果是Vue指令的话，大概是这样的：

// 克隆的自定义指令
directive('table-scroll-fix', {
  mounted(el) {
    // 假设el就是滚动容器，如果不是就用querySelector找
    const scrollContainer = el;
    let lastScrollTop = scrollContainer.scrollTop;
    let lastScrollLeft = scrollContainer.scrollLeft;

    // 用防抖包装滚动处理函数
    const handleScroll = debounce(() => {
      const currentTop = scrollContainer.scrollTop;
      const currentLeft = scrollContainer.scrollLeft;

      // 垂直方向判断
      if (currentTop > lastScrollTop) {
        el._handleDownAction(); // 假设原有指令把处理函数挂载到了el上
      } else if (currentTop < lastScrollTop) {
        el._handleUpAction();
      }

      // 水平方向判断
      if (currentLeft > lastScrollLeft) {
        el._handleRightAction();
      } else if (currentLeft < lastScrollLeft) {
        el._handleLeftAction();
      }

      lastScrollTop = currentTop;
      lastScrollLeft = currentLeft;
    });

    // 添加监听
    scrollContainer.addEventListener('scroll', handleScroll);
    // 记得在销毁时移除监听，避免内存泄漏
    el._scrollListener = handleScroll;
  },
  unmounted(el) {
    el.removeEventListener('scroll', el._scrollListener);
  }
});

5. 边界细节调整 #

最后还要处理一些边界情况，避免无效触发：

• 滚动到容器顶部时，向上滚动不应该再触发固定逻辑
• 滚动到容器底部时，向下滚动也不触发
• 水平滚动到最左/最右时同理

可以加个判断：

// 向上滚动时，只有还没到顶部才触发
if (currentTop < lastScrollTop && currentTop > 0) {
  handleUpAction();
}
// 向下滚动时，只有还没到底部才触发
if (currentTop > lastScrollTop && currentTop < scrollContainer.scrollHeight - scrollContainer.clientHeight) {
  handleDownAction();
}

内容的提问来源于stack exchange，提问作者user4217999