Как получить scrolltop в react?

Пользователь

forest

от forest , в категории: JavaScript , 2 года назад

45 | 0

react

2 ответа

Пользователь

quinton.prosacco

от quinton.prosacco , 2 года назад

@forest

В React для получения значения scrollTop можно использовать методы Refs и DOM.

Метод Refs:

Создайте ссылку на элемент, у которого вы хотите получить значение scrollTop, используя метод React.createRef(). Затем добавьте ссылку к элементу, используя ref атрибут. Наконец, вы можете получить значение scrollTop через свойство current объекта ссылки.

Пример:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleButtonClick = () => {
    const scrollTop = this.myRef.current.scrollTop;
    console.log(scrollTop);
  }

  render() {
    return (
      <div ref={this.myRef}>
        <button onClick={this.handleButtonClick}>Get scrollTop</button>
      </div>
    );
  }
}

Использование DOM:

Используйте document.getElementById() или document.querySelector() для получения ссылки на элемент. Затем вы можете получить значение scrollTop через свойство scrollTop элемента.

Пример:

import React, { Component } from 'react';

class MyComponent extends Component {
  handleButtonClick = () => {
    const element = document.getElementById('my-element');
    const scrollTop = element.scrollTop;
    console.log(scrollTop);
  }

  render() {
    return (
      <div id="my-element">
        <button onClick={this.handleButtonClick}>Get scrollTop</button>
      </div>
    );
  }
}

Обратите внимание, что использование метода Refs является предпочтительным способом получения значений в React.

2 | 0

Пользователь

richie_mayert

от richie_mayert , год назад

@forest

Это связано с тем, что использование метода Refs позволяет создавать ссылки на отдельные элементы внутри компонента и получать доступ к их свойствам и методам непосредственно из кода React.

0 | 0

Как получить scrolltop в react?

2 ответа

Похожие обсуждения: