Javascript 如何在按键时触发特定滚动事件（div内的箭头向上或箭头向下）

我开发了聊天web应用程序。 每当（例如）按下“w”或“s”键时，我希望在特定的div（聊天页）上触发滚动事件， 如果chatPage div的焦点处于打开状态，并按下箭头向上或箭头向下键，则完全相同

注意：我希望模拟当div元素具有焦点时按下“ArrowUp”或“ArrowDown”键时在浏览器上触发的默认滚动事件，而不是通过其他方法（如调用div引用的current.scrollBy）来完成

（不是这样的）：

这可以正常工作，但当按下箭头键时，浏览器的默认滚动并不顺畅。 此外，我不希望使用任何知道如何触发事件的外部React API，而只使用React标准库

相反，我希望使用更多类似的内容：

var scrollEvent = new Event("scroll", {
      bubbles: true,
      cancelable: true
      view: window
      // probobaly here some proparties need to be added 
    });
document.getElementById("chatPage").dispatchEvent(scrollEvent)

它确实触发了一个滚动事件，但与上面解释的事件不同，因此它什么也不做

我不知道如何定义Event（）构造函数来模拟 当某个特定div元素处于焦点时，只要按下“ArrowUp”或“ArrowDown”键，浏览器就会触发精确的事件

所以我的问题是，如何准确地定义滚动事件构造函数来模拟特定的默认浏览器事件（例如通过键盘上的箭头滚动div）？ （还将提供如何通过console.log（）查找此特定事件属性的说明）

---

谢谢

浏览器中的安全模型阻止直接访问许多类似的事件。解决方案是使用

requestAnimationFrame

手动设置滚动动画，以向您的问题中的代码提供较小的增量。

如果存在触发此类事件的API，则必须有不使用API的解决方案。（fireEvent可以做到这一点，但我不想使用任何外部API，特别是不希望只在开发中使用的API）

var scrollEvent = new Event("scroll", {
      bubbles: true,
      cancelable: true
      view: window
      // probobaly here some proparties need to be added 
    });
document.getElementById("chatPage").dispatchEvent(scrollEvent)