progress bar

const [position, setPosition] = useState(0);

 function onScroll() {
    setPosition(window.scrollY);
 }
 
   useEffect(() => {
    window.addEventListener("scroll", scrollHandler);
     // window에 아예 설치를 해버렸기 때문에 언마운트될때도 작동 안하게 삭제해줘야함 -> return
    return () => {
      window.removeEventListener("scroll", scrollHandler);
      // 언마운트 되기 직전에 이 이벤트가 제거됨.
    };
  }, []);
return(
		<div className="progressMainWrapper">
          <div
            className="progressMainStyle"
            style={{ width: `${position}%` }}
          >
           </div>
        </div>
)

document.documentElement.スクロール上部:スクロール時の高さ(可変)
document.documentElement.スクロール高さ:全高(固定)
document.documentElement.ClientHeight:可視高さ(固定値)