반응형 스크롤진행바1 페이지 스크롤 진행률을 표시해보자 - 상단 progress-bar 만들기 페이지 스크롤 진행률을 표시해 보자 - 상단 progress-bar 만들기 이전 2개의 포스팅에서 이벤트 리스너를 달고, scroll을 감지하는 내용을 배우고 정리해 보았습니다. 이런 것들은 배우고 익혀서 대체 어디에 써먹을 수 있을까요? 웹사이트를 서핑하다 보면, 이렇게 페이지 상단에 프로그래스 바를 만들어 두고 본문을 얼마큼 읽었는지 표시해 주는 UI를 만나는 경우가 있습니다. 왠지, 스크롤 전체 높이를 알고, 현재 스크롤한 값을 알 수만 있다면 Javascript로 구현을 할 수 있겠다는 생각이 들지 않은가요? scroll 이벤트를 배웠으니, 당장 써먹어 보도록 합니다. 세로 높이가 긴 문서 준비 예제로 활용할 HTML 문서는 다음과 같이 만들어봤습니다. VSCode에서 lorem * 500 정도 .. 2023. 2. 11. 이전 1 다음 반응형