如何用 puppeteer 模拟弹出窗口中 div 内的鼠标滚动？

Question

假设您有一个<div>单击鼠标就会出现的元素。它的内部有一长串按包装纸的固定大小裁剪的项目。据我了解，在 div 元素上设置.offsetTop可以解决这个问题，但我尝试在 puppeteer 无头浏览器中使用它page.evaluateHandle返回JSHandle. 因此，如果我无法获取此函数返回的原始元素，我很困惑如何准确地实现结果。设置offsetTop回调内部并没有什么区别，所以我肯定做错了什么。

  const divHandle = await page.evaluateHandle(() => {
    let overflowDiv = document.querySelectorAll(
      `some > selector`
    )[0];
    overflowDiv.offsetTop = overflowDiv.offsetTop + 200
    return overflowDiv.offsetTop;
  });

顺便说一句，它.asElement()也以某种意想不到的方式表现，我不完全明白如何尝试找到一个元素，获取它的绝对位置或简单地设置参数。

附加说明：正如 API 文档所述.evaluateHandle()：

...要在页面上下文中评估的函数

...page.evaluate 和 page.evaluateHandle 之间的唯一区别是 page.evaluateHandle 返回页内对象 (JSHandle)。

因此 ，要获取一个元素，必须从evaluateHandle方法返回 JSHandle，然后将其作为第二个参数传递给evaluate方法，如下所示：

await page.evaluate(e => e, jsHandle);

但主要问题仍然是如何操纵属性，特别offsetTop是模仿滚动。

Answer 1

其实答案很简单。我错过了最简单的解决方案div.scrollTop = ...。

try {
  const res = await page.$eval(`div._weirdo`,
    e => {
      e.scrollTop = e.scrollTop + 200
      return e
    }
  )
}
catch (e) {
  console.log(e)
}