반응형 scrollheight2 페이지 스크롤 진행률을 표시해보자 - 상단 progress-bar 만들기 페이지 스크롤 진행률을 표시해 보자 - 상단 progress-bar 만들기 이전 2개의 포스팅에서 이벤트 리스너를 달고, scroll을 감지하는 내용을 배우고 정리해 보았습니다. 이런 것들은 배우고 익혀서 대체 어디에 써먹을 수 있을까요? 웹사이트를 서핑하다 보면, 이렇게 페이지 상단에 프로그래스 바를 만들어 두고 본문을 얼마큼 읽었는지 표시해 주는 UI를 만나는 경우가 있습니다. 왠지, 스크롤 전체 높이를 알고, 현재 스크롤한 값을 알 수만 있다면 Javascript로 구현을 할 수 있겠다는 생각이 들지 않은가요? scroll 이벤트를 배웠으니, 당장 써먹어 보도록 합니다. 세로 높이가 긴 문서 준비 예제로 활용할 HTML 문서는 다음과 같이 만들어봤습니다. VSCode에서 lorem * 500 정도 .. 2023. 2. 11. 마우스 wheel 동작 이벤트 및 감지 - Part 2 : scrollTop, scrollHeight, clientHeight 마우스 wheel 동작 이벤트 및 감지 - scrollTop, scrollHeight, clientHeight 지난 포스팅에서 마우스 휠 이벤트를 감지하는 기본적인 방법들과 활용방식을 정리했습니다. 이벤트 리스너를 브라우저 창에 붙이는 경우와, 엘리먼트에 붙이는 경우에 사용하는 함수가 서로 다르다는 점에 꼭 유의가 필요하다고 정리를 했습니다. 마우스 wheel 동작 이벤트 및 감지 - scrollY, scrollTop 차이? 마우스 wheel 동작 이벤트 및 감지 - scrollY, scrollTop 차이? 마우스 wheel 동작 이벤트 및 감지 웹문서를 다이내믹하게 표현하기 위해서는 scroll 이벤트에 대한 동작 감지와 컨트롤은 필수일 것입니다. 이벤트 리스너를 달아두고 click을 감지하는 것은 비.. 2023. 2. 10. 이전 1 다음 반응형
