Javascript-17 (HTML position and size)

faunus·2021년 4월 29일
0

Javascript

목록 보기
17/18
post-thumbnail

특히 인터랙티브한 이미지 구현을 원하는 분들이라면 꼭 봐야하는 것이 스크롤을 다루는 것이라고 생각한다.
사실 매번 찾아봐도 나쁠건 없지만 작업속도 등을 고려하면 기본적인 것은 미리 익혀두는 것이 좋을 것 같다.

[ 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

  • 모니터 스크린 기준으로 현재 마우스 포인터의 위치를 반환한다.
profile
예술을 사랑하는 개발자

0개의 댓글