특히 인터랙티브한 이미지 구현을 원하는 분들이라면 꼭 봐야하는 것이 스크롤을 다루는 것이라고 생각한다.
사실 매번 찾아봐도 나쁠건 없지만 작업속도 등을 고려하면 기본적인 것은 미리 익혀두는 것이 좋을 것 같다.
[ Element ]
clientWidth / clientHeight
-
읽기 전용 메소드
-
요소의 border, scrollbar, margin을 제외하고, padding을 포함한 현재 보이는 부분에 대한 너비와 높이를 반환한다.
=> 즉, Content의 전체 크기가 아닌 가려진 부분을 제외한 보여지는 요소의 크기만 반환 한다. -
반올림 되어서 정수 값을 반환한다.
⇒ 더 정확한 소수점 이하의 값을 얻기 위해서는 아래 코드를 사용한다.
element.getBoundingClientRect( )
clientTop / clientLeft
- 읽기 전용 메소드
- 요소의 margin, padding을 제외하고, left / top border의 너비와 left / top scrollbar의 너비를 합한 것을 반환한다.
scrollHeight / scrollWidth
-
읽기 전용 메소드
-
요소의 border, scrollbar, margin을 제외하고 padding을 포함한 요소 컨텐츠의 전체 크기를 반환한다.
-
요소의 크기가 요소 컨텐츠 크기보다 작을 경우에도 요소의 크기를 벗어난 컨텐츠 크기도 반영되어서 전체 컨텐츠 크기를 알 수 있다!!
-
정수로 반올림 된 값을 반환한다
⇒ 정확한 소수점 이하 값을 얻고 싶다면 아래를 사용해야한다
element.getBoundingClientRect( )
scrollLeft / scrollTop
- 쓰기(set)가 가능한 메소드
- scroll-bar가 있는 요소에서 컨텐츠가 스크롤 된 너비 / 높이를 반환한다.
offsetWidth / offsetHeight
-
요소의 margin을 제외하고 padding, border를 포함한 너비와 높이를 반환한다.
-
의사요소(psedu-elements) 등의 크기는 포함 되지 않는다.
-
display : hidden; 상태에서는 0을 반환한다
-
정수로 반올림 된 값을 반환한다
⇒ 정확한 소수점 이하 값을 얻고 싶다면 아래를 사용해야한다
element.getBoundingClientRect( )offsetLeft / offsetTop
- 요소의 margin, Left / Top으로 가장 가까운 상위요소의 padding, scrollbar, border를 포함한 상대위치를 반환한다
- 예를 들어, 한 이미지를 가져와서 offsetTop을 찍어보면 그 이미지의 높이가 고정되어서 출력된다.
- 이 때, 상위 요소는 position : static으로 설정되지 않은 상태이다.
pageXoffset / pageYoffset
- addEventListener에 scroll 사용하면, window.pageYoffset으로 현재 Y축 위치 체크 할 수 있다
window.scrollY == window.pageYoffSet은 같다
=> 단, scrollY는 EI(11 or below)에서 적용되지 않고, pageYoffset은 모든 곳에 다 적용된다
getBoundingClientRect()
window.addEventListener('scroll', function() {
output.innerHTML = myImage.getBoundingClientRect()
})-
이렇게 해보면 bottom, height, left, top, width, x, y 등이 나온다
-
explorer에서는 x, y 값을 지원하지 않으므로 다양한 곳에 적용되어지는 top, left를 사용하는 것이 안전 할 것이다.
[ Mouse Point Event ]
clientX / clientY
- 전체 컨텐츠 영역(View Port)을 기준으로 현재 마우스 포인터의 위치를 반환한다.
pageX / pageY
- 페이지의 URL 입력 창 아래의 실제 컨텐츠 부분을 기준으로 현재 마우스 포인터의 위치를 반환한다.
- clientX / clientY와 유사하지만 embeded 페이지에서는 다른 값을 반환한다.
offsetX / offsetY
- 이벤트 객체를 기준으로 현재 마우스 포인터의 위치를 반환한다
screenX / screenY
- 모니터 스크린 기준으로 현재 마우스 포인터의 위치를 반환한다.
.jpg)