728x90
scrollLeft / scrollTop을 이용하여 스크롤바가 현재 (위쪽으로부터/왼쪽으로부터) 어느 위치에 있는지 퍼센트 구하기
1. scrollTop 퍼센트 구하기(세로 스크롤)
let scrollDiv = document.getElementById("#scrollDiv");
let scrollPos = scrollDiv.scrollTop / (scrollDiv.scrollHeight - scrollDiv.clientHeight) * 100;
// 또다른 스크롤바 div의 위치를 scrollDiv위치와 동일하게 움직이기
$("#anotherScrollDiv").scrollTop(scrollPos);
2. scrollLeft 퍼센트 구하기(가로 스크롤)
let scrollDiv = document.getElementById("#scrollDiv");
let scrollPos = scrollDiv.scrollLeft / (scrollDiv.scrollWidth - scrollDiv.clientWidth) * 100;
// 또다른 스크롤바 div의 위치를 scrollDiv위치와 동일하게 움직이기
$("#anotherScrollDiv").scrollLeft(scrollPos);
728x90
'프론트엔드' 카테고리의 다른 글
| [React] 화면 크기 변화 감지 Hook (window.matchMedia) (0) | 2025.07.12 |
|---|---|
| [해결] videojs에서 HLS 스트리밍 시 CORS 오류 발생 (0) | 2023.10.09 |
| [트러블 슈팅] base 64 image to Javascript File (Feat. Naver Smart Editor 2.0) (3) | 2022.01.19 |
| [트러블 슈팅] 페이지 길 때만 top 버튼 보이기(feat. window.onload, $(document).ready 차이) (0) | 2022.01.17 |
| [Javascript] onclick과 addEventListener의 차이 (1) | 2021.09.21 |
댓글