React实现List组件仅禁止向上滚动，允许向下滚动

要实现仅禁止向上滚动、允许向下滚动查看已有数据的需求，核心是判断用户的滚动方向，只在用户试图向上滚动时阻止，向下滚动则放行。

修改后的disable函数代码如下：

function disable(e) {
  const newScrollPosition = e.target.scrollTop;
  const isScrollingUp = newScrollPosition < scrollPosition;

  // 未锁定滚动时，实时更新当前滚动位置
  if (!scrollBlocked) {
    setScrollPosition(newScrollPosition);
  }

  // 仅当滚动锁定且用户向上滚动时，阻止滚动行为
  if (scrollBlocked && isScrollingUp) {
    e.target.scrollTo({
      top: scrollPosition,
      left: 0
    });
  }
}

关键逻辑说明： #

• 通过newScrollPosition < scrollPosition判断用户是否在向上滚动：scrollTop值越小，代表元素向上滚动的幅度越大。
• 只有同时满足scrollBlocked为true（无更多数据）和用户向上滚动两个条件时，才强制将滚动位置重置到之前保存的scrollPosition，阻止向上滚动。
• 用户向下滚动时（newScrollPosition > scrollPosition），不执行任何阻止逻辑，允许正常滚动查看已有内容。

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