Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

嵌套滚动内容时，内部滚动效果会直接穿透到外层虚拟列表不生效

未关闭
  • 哪里不对？
#292 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
需要澄清
活跃度
停滞
技术栈
react, typescript
领域
frontend

调研方向

首先，在虚拟列表中复现嵌套滚动，并检查提供的 useProxyWheel hook，尤其是它的 onWheelCapture 和 onScroll 入口点。当内部滚动在内部边界处不再泄漏到外部虚拟列表，同时外部列表仍能在适当情况下响应时，即视为完成；不指定任何仓库文件或测试。

由索引模型根据 Issue 内容生成。

描述

目前只能用这种方法在内部滚动区域拦截 wheelCapture 事件，有没有什么更简洁的方法呢

import {UIEvent, useCallback, useEffect, useRef, WheelEvent} from 'react';
export const useProxyWheel = (ref: HTMLElement | null) => {
    const canDeltaUp = useRef(false);
    const canDeltaDown = useRef(false);
    const onWheelCapture = (e: WheelEvent<HTMLElement>) => {
        if (e.deltaY > 0 && !canDeltaDown.current) {
            e.stopPropagation();
        }
        if (e.deltaY < 0 && !canDeltaUp.current) {
            e.stopPropagation();
        }
    };
    const calculate = (target: HTMLElement) => {
        if (target.scrollTop + target.clientHeight >= target.scrollHeight - 2) {
            canDeltaDown.current = true;
            canDeltaUp.current = false;
        } else if (target.scrollTop === 0) {
            canDeltaDown.current = false;
            canDeltaUp.current = true;
        } else {
            canDeltaDown.current = false;
            canDeltaUp.current = false;
        }
    };

    const onScroll = (e: UIEvent<HTMLElement>) => {
        calculate(e.target as HTMLElement);
    };

    const resizeObserver = useRef<ResizeObserver>(
        new ResizeObserver(() => {
            ref && calculate(ref);
        })
    );
    const cleanupFn = useCallback(() => {
        ref && resizeObserver.current.unobserve(ref);
    }, [ref]);

    useEffect(() => {
        if (ref) {
            calculate(ref);
            resizeObserver.current.observe(ref);
        }
        return cleanupFn;
    }, [cleanupFn, ref]);

    return {
        onWheelCapture,
        onScroll,
    };
};
主要语言
TypeScript
星标
814
派生
171
平均合并
1 小时 3 分钟
30 天内合并 PR
3

环境准备

我们还没有检查这个项目的环境配置文件。先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

react-component/virtual-list 的其他 Issue

查看 react-component/virtual-list 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。