[ JavaScript ] 요소의 크기나 위치를 알 수 있는 getBoundingClientRect()

getBoundingClientRect() 

요소의 크기와 위치에 관한 정보를 제공하는 자바스크립트 메서드이다.

특정요소의 경계상자(BoundingBox)에 대한 정보를 얻을 수 있다.

 

메서드는 호출한 요소의 사각형 경계에 대한 정보를 포함하는 DOMRect 객체를 반환한다.

이 DOMRect 객체에는 다음과 같은 속성이 있다.

 

• top: 요소의 상단 경계선의 Y 좌표
• right: 요소의 우측 경계선의 X 좌표
• bottom: 요소의 하단 경계선의 Y 좌표
• left: 요소의 좌측 경계선의 X 좌표
• width: 요소의 너비 (right - left)
• height: 요소의 높이 (bottom - top)
• x: 요소의 좌측 경계선의 X 좌표 (left와 동일)
• y: 요소의 상단 경계선의 Y 좌표 (top과 동일)

메서드를 사용하면 요소의 위치나 크기, 경계선 등 정보를 동적으로 얻을 수 있다.

이 정보를 활용해 요소를 정확하게 배치하거나 상호작용에 활용할 수 있다.

 

 

메인드라마가 있는 부분의 요소의 높이를 getBoundingClientRect().height를 통해서 구하고

mainDramaDivHeight라는 변수에 담은 다음, fixHeadArrowAnimation의 인자로 받아온다.

 

fixHeadArrowAnimation function은 스크롤 발생할 때마다 발생하는데

window.scrollY가 mainDramaDivHeight보다 크면  arrow-up-visible 클래스가 생기고,

작으면 클래스가 사라지는 코드이다.

 

 

이렇게 getBoundingClientRect()를 통해서 요소의 높이와 스크롤 위치를 비교하여 

버튼 요소를 생기고 사라지게 만들 수 있다.

응용한다면 여러가지 재밌는 동작들을 많이 만들 수 있을 것 같다.