添加新行时在顶部滚动表格

Question

我是web Development. 的新手，我有一张桌子，在那张桌子上，

<tbody>
<tr>
<td>
</td>
</tr>
</tbody>

现在，它有一个滚动条，因为它有一个固定的高度。现在，我在那个表中有 50 个tr，所以，用户正在滚动那个表。 现在，我有一个单击按钮，可以再添加一个按钮，它会添加到first position 中。 所以，用户滚动了表格，并且也被添加了。现在，我想做的是在添加行后，scroll bar should be at top 这样用户将立即看到新添加的行。

有什么办法吗？

Answer 1

您可以使用为 react 制作的 antd 库来实现它。

具体来说，可以使用prop validateFieldsAndScroll。 例如，在您的情况下，您的 handleSubmit 函数将类似于：

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

Answer 2

您可以使用 Element.scrollTo 函数 (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) 例如

document.querySelector('tbody').scrollTo(0, 0)

编辑：

React 的方式是这样的：

render() {
  return (
    <table>
      <tbody ref={ref=>this.tbody = ref}>
      ...

然后在 onClick 处理程序中：

onClick() {
  // add the new row
  const rowsWithNewRow = ...
  this.setState({rows:rowsWithNewRow})
  this.tbody.scrollTo(0,0)
  ...