在添加新行时顶部滚动表

Question

我是web Development.新手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)
  ...