Element 노드 지오메트리와 스크롤링 지오메트리

1. Element 노드 크기, 오프셋, 스크롤링 개요

2. offsetParent를 기준으로 element의 offsetTop 및 offsetLEft 값을 가져오기

3. getBoundingClientRect() 사용하여 뷰포트를 기준으로 element의 TOP, Right, bottom, left 테두리 오프ㅔㅅ 얻기

4. 뷰포트에서 element의 크기 얻기

5. 뷰포트에서 테두리를 제외한 element의 크기 얻기(패딩+내용)

6. elementFromPoint()를 사용하여 뷰포트의 특정 지점에서 최상단 element 얻기

7. scrollHeight, scrollWidth를 사용하여 스크롤될 element의 크기 얻기

8. scrollTop, scrollLeft를 사용하여 top및 left로부터 스크롤될 픽셀을 가져오거나 설정하기

• scrollTop, scrollLeft 속성은 스크롤 때문에 현재 뷰포트에서 보이지 않는 left나 top까지의 픽셀을 반환한다.

9. scrollIntoView()를 사용하여 element를 View로 스크롤하기

document.querySelector('content').children[4].scrollIntoView(true);

• 스크롤이 가능한 노드 내에 있는 노드를 선택하면, scrollIntoView() 메서드를 사용하여 선택된 노드가 view로 스크롤되도록 할 수 있다.
• scrollIntoView() 메서드에 매개변수 true를 전달하면 대상 element의 top으로 스크롤한다. default
• (false)이면 bottom으로 스크롤한다.