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

Question

I want to be able to reset the scroll position to 0 when loading new data. As of now when new data is passed as props, the scroll position remains. This causes a bit confusion for the users.

EDIT: The scroll is in the React-Table component, and not the page scroll.

Answer 1

yes you can reset programatically reset scroll to top use component did update lifecycle componentDidUpdate() { window.scrollTo(0,o); } componentDidUpdate() { window.scrollTo(0,o); }

Answer 2

Found the solution. I used a perfect scrollbar component which I made a ref for with the passed object of the table, such that I could call this.scroll.scrollbar.scrollTo(0,0) which resets the table scroll.

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

Answer 3

I think this can be worked simply like this.

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

Assume you got 2 components of react-table in your DOM. If you want to reset scroll of the first react-table, use this in your fetch data, or your button click query then show data.

resetScrollInsideTable(0)

And do the reset for the 2nd react-table

resetScrollInsideTable(1)