[JavaScript]가로슬라이드 두 종류

✔️ scrollWidth : 스크롤 가능한 영역의 너비
✔️ offsetWidth : 특정 요소의 너비
✔️ innerWidth : 브라우저 창의 내부 너비

1. 화면 전체 가로 슬라이드

스크롤이 끝나야 하는 지점 :
슬라이드의 오른쪽 끝 변이 화면에 들어올때 까지
=> 슬라이드를 slider.scrollWidth - window.innerWidth 만큼 이동해준다.

slider.scrollWidth만 이동해주게 되면 마지막 패널이 화면 밖으로 조금 밀리거나 오른쪽에 빈 공간이 보일 수 있다.

ex) 패널이 총 5개이고 각각 1000px이라고 가정하면, slider.scrollWidth는 5000px.
뷰포트 너비(innerWidth)가 1000px이라면, slider.scrollWidth - window.innerWidth는 4000px.
이 4000px 지점에서 스크롤이 멈추면, 뷰포트에 마지막 패널이 딱 맞게 보이게 된다.

2. 요소 안에 가로슬라이드

스크롤이 끝나야 하는 지점 :
슬라이드 오른쪽 끝 변이 컨테이너에 들어올때 까지
=> 슬라이드를 -(container.scrollWidth - container.offsetWidth) 만큼 이동해준다.

정리

✔️ element.scrollWidth - window.innerWidth
브라우저 창에 대해 콘텐츠가 얼마나 넘치는지를 나타낸다.

✔️ element.scrollWidth - element.offsetWidth
특정 요소의 가시 너비를 초과한 콘텐츠 크기를 나타낸다.