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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

@forest 

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

  1. Метод Refs:


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


Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
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>
    );
  }
}


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


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


Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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.

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

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

@forest 

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