자식 요소의 콘텐츠가 부모 요소보다 크다면, 부모 요소에 스크롤이 생기고, 마우스 휠로 스크롤할 수 있다. 마우스 휠 외에도 click / move 이벤트를 이용해 마우스 드래그로 스크롤하도록 만들 수 있다.

TL;DR

1. 마우스를 클릭했을 때
   1. clientX clientY (뷰포트 기준)좌표와, 요소의 스크롤 위치 scrollLeft scrollTop 저장
   2. 클릭 상태 true로 변경
   3. (CSS) cursor: grabbing user-select: none
2. 클릭한 상태에서 마우스를 이동(드래그)했을 때
   1. ➊이동을 멈춘 지점(clientX/Y)과 ➋마우스를 클릭한 지점**(clientX/Y)**을 뺀 값 계산 — 스크롤한 범위
   2. (요소의 현재 스크롤 위치)와 (스크롤한 값)을 뺀 위치로 스크롤 이동
3. 마우스 클릭을 해제하거나 이벤트 영역을 벗어났을 때
   1. 클릭 상태 false로 변경
   2. (CSS) cursor: grab
4. 요소를 기준으로 클릭한 곳에 마커(이미지) 등을 추가하고 싶을 때
   1. 네이티브 이벤트에 접근해서 offsetX offsetY 좌표값 저장 후(스크롤 영역까지 포함한 값)
   2. 자식 이미지 태그의 left top 포지션 값으로 offsetX offsetY 할당

기하 프로퍼티

• 🔍️ 기하 프로퍼티 이미지 via JavaScript Info

메서드별 측정 기준 ⭐️

• offset : 이벤트가 걸려 있는 DOM 객체 기준
• screen : 모니터 기준
• client : 브라우저 기준
• page : 문서 기준

구현전 알아야할 기하 프로퍼티 ⭐️