1. 항상 스크롤이 있기

   body {
     -ms-overflow-style: inherit;
   }
   

   chrome에서 스크롤이 width 크기를 차지해서 있다 없어지면 화면이 불안정해져 ㅜㅜ 😭

2. 항상 스크롤 숨기기 (작동)

   .box {
       -ms-overflow-style: none; /* IE and Edge */
       scrollbar-width: none; /* Firefox */
   }
   .box::-webkit-scrollbar {
       display: none; /* Chrome, Safari, Opera*/
   }
   

scrollHeight vs clientHeight

현재 스크롤의 높이 scrollTop

스크롤 바닥에 갔을 때의 높이 ⇒ scrollHeight - clientHeight

Scroll Progress 계산하는 법.

const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const cur = document.documentElement.scrollTop;
const progress = (cur / height) * 100

참고

https://ko.javascript.info/size-and-scroll#ref-535