スクロールとref

スクロール上部:垂直スクロールバーの位置
スクロール高さ:スクロール付きボックスdiv高さ
ClientHeight:スクロール可能なシャーシの高さ
必要なラベルに移動し、プロパティにref={(ref)=>this.volk=ref}を設定すると、ドームにrefを使用できます.
ここにいるよこのセクションをスクロールして、必要なアクションに基づいてランダムに名前を設定します.
this.Chorongこれでも大丈夫!
refはタグだけでなく素子にも使用できます
refを使用したスクロールの例を次に示します.
ScrollBox.js

import React, { Component } from 'react';

class ScrollBox extends Component {
  scrollToTop = () => {
    const { scrollHeight, clientHeight } = this.box;
    this.box.scrollTop = clientHeight - scrollHeight;
  };

  scrollToBottom = () => {
    const { scrollHeight, clientHeight } = this.box;

    this.box.scrollTop = scrollHeight - clientHeight;
  };

  render() {
    const style = {
      border: '1px solid black',
      height: '300px',
      width: '300px',
      overflow: 'auto',
      position: 'relative',
    };

    const innerStyle = {
      width: '100%',
      height: '650px',
      background: 'linear-gradient(white, black)',
    };

    return (
      <div
        style={style}
        ref={ref => {
          this.box = ref;
        }}
      >
        <div style={innerStyle}></div>
      </div>
    );
  }
}

export default ScrollBox;

App.js

import React, { Component } from 'react';
import ScrollBox from './ScrollBox';

class App extends Component {
  render() {
    return (
      <div>
        <ScrollBox ref={ref => (this.scrollBox = ref)} />
        <button onClick={() => this.scrollBox.scrollToTop()}>맨 위로</button>
        <button onClick={() => this.scrollBox.scrollToBottom()}>
          맨 밑으로
        </button>
      </div>
    );
  }
}

export default App;