뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, How To Create A Scroll Indicator Progress Bar In React Hooks
서원석님의 학습노트

[React - 요약] 스크롤 진행률을 알려주는 indicator 구현하기

#전체
#개발자
#프론트엔드
#arslan
#coding
#react
#reactjs
#html
#css
#progress bar
#javascript
#reactjs progress bar
#scroll indicator progress bar
#react scroll indicator progress bar
00:01결과물 예시
00:28코드 작성 시작 progress bar CSS 작업
03:02(~04:55) progress bar onScroll 콜백 함수 구현 *04:55까지 시청한 후 해설노트를 읽어주세요. document.documentElement.scrollTop: scroll한 높이 document.documentElement.scrollHeight: 페이지 전체 높이(스크롤 범위 포함) document.documentElement.clientHeight: 페이지 전체 높이(스크롤 범위 제외, 즉 viewport 높이) 정리: '스크롤 포함한 전체 높이' - '스크롤 제외한 전체높이'는 스크롤 영역의 높이죠? 이것을 현재 스크롤 된 높이만큼으로 나눈다면 아래와 같은 식이 됩니다. '스크롤 된 높이/스크롤 가능 높이' 그래서 스크롤을 제일 아래까지 하면 1이 되고 스크롤을 하나도 하지 않으면 0이 되겠죠 여기에 100을 곱해서 percentage화 시킨 것입니다.
05:23(~07:06) onScroll 콜백함수가 scroll action 될 때 호출되도록 useEffect로 구현 & 스크롤 된 %만큼 background-color의 width 되도록 CSS 작성
08:27(~08:40)스크롤이 되도록 긴 문자열 추가 & 완성
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기