Реагируйте: установка свойства scrollTop для div не работает

Question

Я новичок, чтобы реагировать, и в настоящее время я пытаюсь установить для свойства scrollTop элемента div желаемое число. К сожалению, это не работает для меня. Смотрите код ниже:

class Testdiv extends React.Component {
  constructor(props){
    super(props);
    this.divRef = React.createRef();
  }
  componentDidMount(){
    this.divRef.current.scrollTop = 100;
  }
  render(){
    return (
     <div className="testDiv" ref={this.divRef}>
      Hello World<br /><br /><br /><br />
        Hello World!
      </div>
    );
  }
}
ReactDOM.render(
 <Testdiv />,
 document.getElementById('root')
);

И CSS:

.testDiv{
  height: 500px;
  overflow: auto;
}

Здесь - кодовое перо для соответствующего кода. Постскриптум Я не хочу использовать Jquery. Спасибо за помощь.

Answer 1

Вы должны убедиться, что содержимое testDiv выше, чем сам контейнер, и установить переполнение на оси Y для прокрутки.

Пример

class Testdiv extends React.Component {
  divRef = React.createRef();

  componentDidMount() {
    setTimeout(() => {
      this.divRef.current.scrollTop = 1000;
    }, 1000);
  }

  render() {
    return (
      <div style={{ height: 200, overflowY: "scroll" }} ref={this.divRef}>
        Hello World
        <div style={{ height: 300 }} />
        Hello World!
      </div>
    );
  }
}

ReactDOM.render(<Testdiv />, document.getElementById("root"));

<script src="https://unpkg.com/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

Это проблема css / overflow, а не JS / React.Проблема в том, что testDiv недостаточно высоко, чтобы что-то произошло.Установите height: 30px, и вы увидите разницу: https://codepen.io/anon/pen/ZmBydZ