使用无限滚动鼠标滚轮事件滚动整页防止反应虚拟化表

Question

在大页内容中使用react-virtualised table和infinite scroll，如果用户滚动到表格底部并且下一组数据尚未完成加载，则鼠标滚轮事件会向窗口冒泡，窗口继续滚过桌子。

有没有办法拦截鼠标滚轮事件来调用preventDefault？这可以检查用户是否在桌子的底部以及是否防止冒泡。

onScroll prop提供了一些信息但不提供事件，并且似乎没有办法访问处理滚动道具的网格元素上的onWheel事件。

Answer 1

您可以使用HTMLElement周围的包装纸Table以常规方式拦截和阻止事件冒泡。

<div onClick={yourHandlerThatPreventsDefault}>
  <Table {...props} />
</div>
<!-- Other Tables here ... -->