【Next.js】Reactでスクロールを検知する

コード

scroll.jsx

import React, {useState, useEffect} from 'react'

const Scroll = () => {
  const [scrollY, setScrollY] = useState(0)

  const handleScroll = () => {
    setScrollY(window.scrollY)
  }

  useEffect(()=> {
    window.addEventListener('scroll', handleScroll )
  }, [])

  return (
    <>
      { scrollY }
    </>
  )
}

export default Scroll

解説

    window.addEventListener('scroll', handleScroll )

ここでイベントリッスンさせて、

  const handleScroll = () => {
    setScrollY(window.scrollY)
  }

関数handleScrollを呼び出すだけ。