Javascript: прокрутка вверх до div при нажатии клавиши ввода

Question

У меня одна проблема с прокруткой.Я использую библиотеку реагирования js Scrollbars для своей задачи.Когда я прокручиваю вниз и нажимаю клавишу ввода в текстовом поле, должна появиться прокрутка для этого элемента.

Я использовал приведенный ниже код для своей задачи.

import React from 'react'
import { Scrollbars } from 'react-custom-scrollbars'

class ScrollBarTask extends React.Component {

handleUserInput = (e) => {
        if (e.key === 'Enter') {
            var element = document.querySelector('.parentDiv')
              element.scrollTop = element.scrollHeight;
              element.scrollTop = 0;
        }
    }
  render(){
    return(
      
      <div>
       <input type="text" placeholder="Enter Value..." value={} onKeyPress={e => this.handleUserInput(e)}
                            />
        <Scrollbars style={{ height: window.innerHeight - 110), clear: "both", backgroundColor: '#EBECED' }} autoHide={true}>
        <div className="parentDiv">
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
        </div>
        </Scrollbars>
      </div>
    
    )
  }
}

export default ScrollBarTask

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

любая помощь будет отличной.

спасибо.

Answer 1

import React from 'react'
import { Scrollbars } from 'react-custom-scrollbars'

class ScrollBarTask extends React.Component {

handleUserInput = (e) => {
        if (e.key === 'Enter') {
            var element = document.getElementById('parentDivID').scrollIntoView({ block: 'start', behavior: 'smooth' });
        }
    }
  render(){
    return(
      
      <div>
       <input type="text" placeholder="Enter Value..." value={} onKeyPress={e => this.handleUserInput(e)}
                            />
        <Scrollbars style={{ height: window.innerHeight - 110), clear: "both", backgroundColor: '#EBECED' }} autoHide={true}>
        <div className="parentDiv" id="parentDivID">
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
          <div>dummy data</div><br><br><br><br>
        </div>
        </Scrollbars>
      </div>
    
    )
  }
}

export default ScrollBarTask

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Для плавной прокрутки вы можете обратиться к этой ссылке.

Надеюсь, это поможет.

Answer 2

Я бы использовал это в вашей функции:

document.getElementById('youridhere').scrollIntoView();

Затем вы можете анимировать прокрутку по вашему желанию