Question

因此，我正在开发我的应用程序中的一项功能，该功能会在打开菜单时在主体上禁用按箭头键滚动，否则将其保留下来。

我正在尝试在Puppeteer中测试该行为，但是当我按下箭头时似乎无法滚动窗口。以下是一些我在实施和测试中正在做的事的例子：

        const disableArrowScroll = (event: KeyboardEvent) => {
            if (
                isOpen &&
                (event.key === 'ArrowDown' ||
                    event.key === 'ArrowUp' ||
                    event.key === 'ArrowLeft' ||
                    event.key === 'ArrowRight')
            ) {
                event.preventDefault();
            }
        };

it('does not effect scroll when menu is closed', async () => {
    await menuClosed(); // Times out if menu is not closed
    await page.focus('body');

    await keyboard.press('ArrowDown');

    expect(await page.evaluate(() => window.scrollY > 0)).toBeTruthy();
});

我已经通过限制视口来确保页面可滚动，而对于window.scrollY为何仍为0确实感到茫然。我丢失了什么吗？在实际运行的演示中，代码似乎按预期运行。

Answer 1

问题在于，启动向下箭头键后，您需要给页面时间向下滚动。您可以通过更改...来做到这一点...

await keyboard.press('ArrowDown');

...到...

await keyboard.press('ArrowDown');
await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1s

在木偶中使用向下箭头滚动

1 个答案: