BOM을 사용하여 브라우저의 스크롤 위치 제어하기

13 Oct 2023

브라우저의 스크롤 위치를 제어하기 위해 BOM (Browser Object Model)을 사용할 수 있습니다. BOM은 브라우저 창과 관련된 객체를 제공하며, 스크롤 위치를 조작하는 데 사용할 수 있는 여러 메서드와 속성을 제공합니다.

현재 스크롤 위치 가져오기

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

위의 코드는 현재 브라우저의 스크롤 위치를 가져오는 방법을 보여줍니다. window.pageYOffset 또는 document.documentElement.scrollTop를 사용하여 수직 스크롤 위치를 가져올 수 있고, window.pageXOffset 또는 document.documentElement.scrollLeft를 사용하여 수평 스크롤 위치를 가져올 수 있습니다.

스크롤 위치 설정하기

window.scrollTo(x, y);

window.scrollTo() 메서드를 사용하여 지정한 좌표로 스크롤 위치를 설정할 수 있습니다. x와 y는 각각 수평과 수직 스크롤 위치를 나타내는 좌표 값입니다.

스크롤 애니메이션 적용하기

function smoothScrollTo(target, duration) {
  var targetElement = document.querySelector(target);
  if (!targetElement) return;

  var targetPosition = targetElement.getBoundingClientRect().top;
  var startingPosition = window.pageYOffset || document.documentElement.scrollTop;
  var startTime = null;

  function scrollAnimation(currentTime) {
    if (startTime === null) startTime = currentTime;

    var elapsedTime = currentTime - startTime;
    var newPosition = easeInOutQuad(elapsedTime, startingPosition, targetPosition, duration);

    window.scrollTo(0, newPosition);

    if (elapsedTime < duration) {
      requestAnimationFrame(scrollAnimation);
    }
  }

  function easeInOutQuad(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(scrollAnimation);
}

위의 코드는 스크롤 애니메이션을 적용하는 함수인 smoothScrollTo()를 보여줍니다. 이 함수는 타겟 엘리먼트의 위치로 스크롤을 부드럽게 이동시키는 역할을 합니다. target은 이동할 엘리먼트의 선택자를 나타내며, duration은 애니메이션의 지속 시간을 나타냅니다.

결론

BOM을 사용하여 브라우저의 스크롤 위치를 제어하는 방법을 알아보았습니다. window.pageYOffset, window.pageXOffset, document.documentElement.scrollTop, document.documentElement.scrollLeft, window.scrollTo()를 통해 스크롤 위치를 확인하고 설정할 수 있으며, smoothScrollTo() 함수를 사용하여 부드러운 스크롤 애니메이션을 구현할 수 있습니다.

댓글 및 피드백은 언제든지 환영합니다! #BOM #스크롤