화면을 가득 채운 메인 타이틀에서 컨텐츠가 있는 영역으로 자동스크롤 하는 기능을 구현하기 위해 요소의 하단 위치(스크롤이 이동할 위치)를 가져오는 방법을 알아보았다.
JavaScript
상단 위치 (top offset)
위치를 가져올 요소를 지정한 뒤 offsetTop 프로퍼티로 가져올 수 있다.
content 영역이 아닌 padding ~ border까지 포함된 가장자리 위치를 가져온다.
const destination = document.querySelector(".dest").offsetTop;
하단 위치
상단 위치에서 요소의 높이만큼 더해준다.
요소의 높이는 offsetHeight 프로퍼티로 받아올 수 있으며, 마찬가지로 padding, border까지를 포함한다.
const el = document.querySelector(".dest");
const bottomOfEl = el.offsetTop + el.offsetHeight;
jQuery
자바스크립트로 구할 때와 원리는 똑같다!
다만 jQuery는 offset을 반환하는 메서드를 사용한다.
상단 위치
const destination = $('.titleContainer').offset().top;
하단 위치
const bottomOffset = $('.titleContainer').offset().top + $('.titleContainer').outerHeight(true);
'JavaScript' 카테고리의 다른 글
[jQuery] 페이지 첫 화면에서 메인 콘텐츠 부분으로 자동 스크롤하기 (0) | 2024.07.19 |
---|---|
CORS 오류와 자바스크립트 모듈화 (0) | 2024.07.18 |
[JavaScript] 특정 위치로 스크롤 이동시키기 (scrollTo) (1) | 2024.07.16 |
[Javascript] 동적 생성한 요소에 이벤트 추가하기 (addEventListener) (1) | 2024.07.03 |
Javascript에서 false로 간주되는 값들 (falsy) (0) | 2024.07.01 |