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

Question

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

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

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

Answer 1

您可以以通常的方式拦截和防止事件冒泡，在Table 周围使用包装器HTMLElement。

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