javascript - 触发鼠标滚轮滚动事件——puppeteer

Question

我有一个脚本，我需要在其中测试页面上的滚动功能。我有两个滚动条，一个用于浏览器窗口，另一个用于我实现了无限滚动的网格。我正在像这样测试浏览器窗口滚动:

(async () => {

    const innerWidth = await page.evaluate(_ => { return window.innerWidth} );
    const innerHeight = await page.evaluate(_ => { return window.innerHeight} );
    const mouse = page.mouse
    await mouse.move(innerWidth/2, innerHeight/2);

    await page.waitFor(500);

    // Scroll Window
    page.evaluate(_ => {
        window.scrollBy(0, innerHeight);
    });     
    ...
}();

这对于窗口滚动效果很好，但是，我不能用它来测试网格中的鼠标滚轮滚动。我知道有一种方法可以像这样在 JQuery 中创建鼠标滚轮事件:

$(".testdiv").on('mousewheel', function(e){
  console.log(e);

})
var event = jQuery.Event( "mousewheel" );
event.deltaY = -1;
$(".testdiv").trigger(event); 

我需要在纯 JS 中执行此操作。有没有办法用纯 JS 在我的脚本中实现它？

Answer 1

你要求的是用纯JS实现mousewheel，测试一下；即调用自定义事件。

为了添加鼠标滚轮监听器

yourdomNode.addEventListener('mousewheel', ()=>{
    //Some mousewheel listener
});

如果您想发送一个用于测试的自定义事件，您可以按照以下步骤操作。您当然可以向创建的事件中添加更多符合您的测试目的的信息。

var cEvent = new Event('mousewheel');

cEvent.detail = 0;
cEvent.wheelDeltaY = someWheelDeltaY;
cEvent.wheelDeltaX = someWeelDeltaX;

if (cEvent.wheelDeltaY) {
  cEvent.wheelDelta = somewheelDeltaY;
} else if (cEvent.wheelDeltaX) {
  cEvent.wheelDelta = someWheelDeltaX;
}

yourdomNode.dispatchEvent(cEvent);