Прокрутите таблицу сверху при добавлении новой строки

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)

EDIT:

Путь Реакт был бы примерно таким:

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)
  ...