ユーザーがReact jでdivの下にスクロールしたときの検出

Question

私は異なるセクションのウェブサイトを持っています。私はsegment.ioを使用して、ページ上のさまざまなアクションを追跡しています。ユーザーがdivの一番下にスクロールしたかどうかを検出するにはどうすればよいですか？私は以下を試してみましたが、ページ上をスクロールするとすぐに起動され、 divの最後に到達したときには表示されません。

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

trackScrolling =() => { 
    const wrappedElement = document.getElementById('header'); 
    if (wrappedElement.scrollHeight - wrappedElement.scrollTop === wrappedElement.clientHeight) { 
    console.log('header bottom reached'); 
    document.removeEventListener('scroll', this.trackScrolling); 
    } 
}; 

Answer 1

あなたが底部はまた、コンポーネントアンマウントのイベント（ `document.removeEventListener`）を削除することをお勧めします

isBottom(el) { 
    return el.getBoundingClientRect().bottom <= window.innerHeight; 
} 

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

trackScrolling =() => { 
    const wrappedElement = document.getElementById('header'); 
    if (this.isBottom(wrappedElement)) { 
    console.log('header bottom reached'); 
    document.removeEventListener('scroll', this.trackScrolling); 
    } 
};