scroll 메서드

특정 위치로 스크롤 이동

window.scrollTo()

• 절대적 위치
• 문서 왼쪽 상단 기준으로부터 이동
• window.scrollTo(x, y)
• window.scrollTo({
  top: 100, //y좌표
  left: 100, //x좌표
  behavior: "smooth", //auto(기본값), smooth
  });
• window.scroll()도 동일
• 작성시 window 생략가능

window.scrollBy()

• 상대적 위치
• 뷰포트 상단 왼쪽으로부터 이동
• window.scrollBy(x, y)
• -y 음수로 작성가능, 현재위치를 기준으로 스크롤up
• 작성시 window 생략가능

[jquery]

$(window).scrollTop(0);

: 맨위로 스크롤 이동

$('div').scrollTop(500);

: 요소 내 스크롤바 위치를 500px만큼 이동한다

스크롤 이동한 값, 특정위치 좌표 알아내기

window.scrollY

: 전체 스크롤 이동한 값 (스크롤바를 얼마만큼 내렸는지 숫자로 출력)

element.getBoundingClientRect()

: 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환

• element.getBoundingClientRect().top: 현재 뷰포트 기준으로부터 top값 출력
• top, left, x, y, width, height 정보 포함

element.offsetTop

: 문서 상단 기준으로부터 y축 값 출력

전체 높이, 현재 보이는 영역의 높이

scrollHeight

: 스크롤 가능한 전체 높이값 (마진제외)

• document.querySelector('html').scrollHeight = document.documentElement.scrollHeight
• document.querySelector('#box').scrollHeight

clientHeight

: 현재 화면에서 보이는 높이

• 주의 box-sizing: content-box일 경우, 요소 + padding
• 주의 box-sizing: border-box일 경우, 요소 + padding + ScrollBar + border
• document.querySelector('#box').clientHeight

window.innerHeight

: 브라우저 창의 보이는 부분의 높이를 나타냅니다. 즉, 사용자가 현재 볼 수 있는 화면의 높이

window.outerHeight

: 브라우저 창 전체를 포함한 영역의 높이

[jquery]

$('요소').height()

: 요소의 높이

$('요소').innerHeight()

: 패딩을 포함한 요소의 높이값

$('요소').outerHeight()

: 패딩,보더를 포함한 요소의 높이값

$('요소').outerHeight(true)

: 패딩,보더,마진을 포함한 요소의 높이값

[참고] 스크립트 실행시점 확인

DOM이 완전히 로드된 후에 스크립트가 실행되도록 확인
엣지 브라우저에서 DOM이 완전히 로드되기 전에 스크립트가 실행되어서 콘솔에 제대로된 값이 안찍히는 현상이 발생.
아래처럼 실행시점 적용하여 해결 가능
1. DOMContentLoaded DOM만 준비된 시점
2. load 이벤트는 이미지, CSS 등 모든 리소스가 로드된 시점

javascript

//1
window.addEventListener('DOMContentLoaded', function() {
  var top = document.querySelector('#box').offsetTop;
  console.log('offsetTop', top);
});
//2
window.addEventListener('load', function () {
  var top = document.querySelector('#box').offsetTop;
  console.log('offsetTop', top);
});

jquery

$(document).ready(function() {
  var top = $('#box').offset().top;
  console.log('offsetTop', top);
});

챗지피티 참고

[추가] requestAnimationFrame()

• 레이아웃 기반 속성을 정확하게 읽고 싶을때 사용한다
• 브라우저가 다음 화면 그리기 프레임 직전에 함수를 실행하도록 예약한다
• 이 타이밍은 브라우저가 DOM, CSS, 레이아웃 계산을 모두 완료한 후이다
• 즉, 레이아웃이 확정된 직후이므로 offsetTop, clientHeight 등의 속성을 정확하게 측정할 수 있다

<script>
  requestAnimationFrame(function() {
    var top = document.querySelector('#box').offsetTop;
    console.log('offsetTop (from rAF)', top);
  });
</script>

[결론]

• 일반적인 DOM 접근은 DOMContentLoaded면 충분하다.
• 정확한 위치/크기 계산이 필요하거나 스크롤 위치에 따른 UI 변경, 애니메이션 초기화 등이 필요할 때는 requestAnimationFrame()이 훨씬 더 정확하다.