JS, 자바스크립트, getBoundingClientRect, scrollTo, 스크롤이벤트

이런 홈 메뉴를 여러분이 만들었을 때, 메뉴 아이템 각각을 클릭 시 하단으로 스크롤링 이벤트를 구현해봤습니다. 

문제는, 이런 식으로 '깔끔하게' 스크롤링이 되지 않는 것과, getBoundingClientRect 값이 계속해서 변동한다는 거죠. 해결법은 간단했습니다. 

https://stackoverflow.com/questions/25630035/javascript-getboundingclientrect-changes-while-scrolling

JavaScript getBoundingClientRect() changes while scrolling

구글신께, javscript getBoundigClientRect에 대해 문의를 드리니, stackoverflow가 나왔고, 그 내용을 보면

야 내가 정확한 Y좌표를 알고 싶은데, getBoundingClientRect를 써보니까, 스크롤링 하는 중간에 이거 Value가 계속 변하더라? 어떻게 하면 진짜 값을 알 수 있는거냐? - 여기서 '진짜' 라는 값은 true False가 아닌 '고정된' 값을 의미합니다.

바로 밑의 Answer에 정답이 나오는데, 

getBoundingClientRect는 document가 아닌 'window'에 따라 값을 얻는다. 네가 처음 scrollTo로 이동할 값을 getBoundingClientRect로 얻어서 스크롤 했을 때, 그때 바로 window 화면의 Y값이 스크롤링에 따라 변한다. 따라서 이 함수(get~)를 쓸거면 넌 값을 보정해 줘야 한다. 보정 값은window.scrollY로 window 화면에서 y화면으로 스크롤해서 내려간 값 만큼 더하면 된다.

라는 해석이 가능하다.

따라서 위처럼 적용해보면

이렇게 깔끔한 이동이 가능하다. 참고로 위에는 event bubbling을 이용한 이벤트 위임이 적용된 코드라, '각 메뉴 아이템인 home/skills/work/testimonials/contact' 별로 따로 addeventlistner를 적용하지 않았다. 

관련 내용이 궁금하다면, 아래 사이트를 참고하시길 바란다.

https://velog.io/@moonheekim0118/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81

[JavaScript] 이벤트 위임