Question

我开发了聊天Web应用程序。我希望每当（例如）按下“ w”或“ s”键时在特定的div（chatPage）上触发滚动事件，如果把chatPage div放在焦点上，并按下ArrowUp或ArrowDown键，则完全相同。

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

（不是这样）：

this.state.chatPageRef.current.scrollBy(0, -20);  //"w" key has preesed
this.state.chatPageRef.current.scrollBy(0, 20);   //"s" key has preesed

这可以正常工作，但是当按下箭头键时，作为浏览器的默认滚动效果不是很好。另外，我不希望使用任何知道如何触发事件的外部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（）查找特定事件的属性的说明的答案也将受到祝福）

谢谢...！

Answer 1

浏览器中的安全模型阻止对此类事件的直接访问。解决方案是使用requestAnimationFrame手动为滚动动画，为问题代码提供较小的增量。

反应如何在按键时触发特定的滚动事件（div内的arrowUp或arrowDown）

1 个答案: