Question

我是web Development.的新手，这里有一张桌子，

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

现在，它具有滚动条，因为它具有固定的高度。现在，我在该表中有50 tr，因此，用户正在滚动该表。现在，我点击了一个按钮，该按钮又添加了一个按钮，它被添加到了first position中。这样，用户已经滚动了表格，并且也被添加了。现在，我想做的就是添加行之后，scroll bar should be at top 这样用户将立即看到新添加的行。

有什么办法吗？

Answer 1

您可以使用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)
  ...

在添加新行时顶部滚动表

2 个答案: