Question

我希望能够在加载新数据时将滚动位置重置为0。截至目前，当新数据作为prop传递时，滚动位置仍然保留。这会给用户带来一些混乱。

编辑：滚动在React-Table组件中，而不在页面滚动中。

Answer 1

是的，您可以以编程方式重置滚动条，以重置使用率最高的组件确实更新了生命周期componentDidUpdate() { window.scrollTo(0,o); }

Answer 2

找到了解决方案。我使用了一个完美的滚动条组件，该组件对表的传递对象进行了引用，从而可以调用this.scroll.scrollbar.scrollTo(0,0)来重置表的滚动。

const PerfectScrollbarBody = (props, table) => (
   <div {...props} className={"rt-tbody"}>
      <Scrollbar ref={node => (table.scroll = node)}>{props.children}</Scrollbar>
   </div>
);

Answer 3

我认为可以像这样简单地工作。

export function resetScrollInsideTable(indexTable) {
  let tableBody = document.getElementsByClassName('rt-tbody')[indexTable];
  tableBody.scrollTop = 0;
}

假设您在DOM中有2个表。如果要重置第一个反应表的滚动，请在获取数据时使用它，或者单击按钮查询然后显示数据。

resetScrollInsideTable(0)

然后重置第二个反应表

resetScrollInsideTable(1)

如何以编程方式重置React表中的滚动

3 个答案: