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来实现鼠标滚轮并进行测试;即调用自定义事件。

为了添加鼠标滚轮监听器

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);

触发鼠标滚轮事件 - 木偶操纵者

1 个答案: