ユーザーがスクロールダウンしたときの反応

Question

私はReactを初めて使う人に興味があり、スクロールの機能を作る正しい方法は何ですか？

たとえば、ユーザーがトップから500pxをスクロールすると、コンソールに何かを記録させたいと思います。これを行う最善の方法は何ですか？

ありがとうございました！

Answer 1

DOMを使用してスクロールイベントリスナーを設定する必要があります。この例を考えてみましょう：

import React from 'react'; 

export default class App extends React.Component { 

    componentDidMount() { 
    document.addEventListener('scroll', this.onScroll); 
    } 

    componentWillUnmount() { 
    document.removeEventListener('scroll', this.onScroll); 
    } 

    onScroll() { 
    var scrollY = window.scrollY; 
    if (scrollY === 500) { 
     console.log(`Scrolled ${scrollY} px`); 
    } 
    } 

    render() { 
    return (
     <main> 
     <div>Some content</div> 
     { this.props.children } 
     <main> 
    ); 
    } 
} 

このコード例では、アプリをどこに置くべきかを知ることができます。私はそれが助けて欲しい

Answer 2

windowのscrollイベントを購読したいと思うでしょう。リスナーを添付する

、あなたはaddEventListenerを呼び出し、それに関数を渡すしようとしている：今

window.addEventListener('scroll', someFunction); 

、場に出た反応するのと、あなたはおそらくcomponentDidMountフックにリスナーを添付することになるでしょうあなたの最上位コンポーネント：

class App extends React.Component { 
    constructor() { 
    super(); 
    this.handleScroll = this.handleScroll.bind(); 
    }, 

    handleScroll(evt) { 
    const fromTop = window.scrollY; 
    }, 

    componentDidMount() { 
    window.addEventListener('scroll', this.handleScroll); 
    }, 

    componentWillUnmount() { 
    window.removeEventListener('scroll', this.handleScroll); 
    } 
}