자바스크립트 실무 유틸 함수 시리즈 18 - 스크롤 관련 유틸

이번 18편에서는 브라우저 스크롤과 관련된 유용한 유틸 함수들을 소개합니다. 스크롤 위치 확인, 부드러운 이동, 하단 감지 등 사용자 경험을 높이는 데 필수적인 기능들을 다룹니다.

---

✅ 1. getScrollPosition (현재 스크롤 위치 확인)

📌 페이지의 수직 스크롤 위치 반환

function getScrollPosition() {
  return window.pageYOffset || document.documentElement.scrollTop;
}

📌 활용 예시

(예: 페이지 스크롤 위치에 따라 상단 고정 메뉴 표시 여부 결정)

if (getScrollPosition() > 100) {
  document.querySelector('header').classList.add('fixed');
}

---

✅ 2. scrollToTop (페이지 상단으로 스크롤)

📌 부드럽게 최상단으로 이동

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

📌 활용 예시

(예: 하단 이동 후 '맨 위로' 버튼 클릭 시)

const btn = document.querySelector('.scroll-top');
btn.addEventListener('click', scrollToTop);

---

✅ 3. scrollToElement (특정 요소로 스크롤)

📌 요소로 부드럽게 스크롤 이동

function scrollToElement(selector) {
  const el = document.querySelector(selector);
  if (el) {
    el.scrollIntoView({ behavior: 'smooth' });
  }
}

📌 활용 예시

(예: 네비게이션 클릭 시 해당 섹션으로 이동)

scrollToElement('#section2');

---

✅ 4. isScrollBottom (페이지 하단 도달 여부 확인)

📌 스크롤이 하단에 도달했는지 판단

function isScrollBottom(threshold = 10) {
  return window.innerHeight + window.scrollY >= document.body.offsetHeight - threshold;
}

📌 활용 예시

(예: 무한 스크롤에서 다음 데이터 요청 시점 감지)

window.addEventListener('scroll', () => {
  if (isScrollBottom()) {
    loadMoreContent();
  }
});

---

✅ 5. lockScroll / unlockScroll (스크롤 잠금/해제)

📌 페이지 스크롤 막기 및 해제

function lockScroll() {
  document.body.style.overflow = 'hidden';
}

function unlockScroll() {
  document.body.style.overflow = '';
}

📌 활용 예시

(예: 모달 열기 시 배경 스크롤 차단)

const modal = document.querySelector('.modal');
modal.classList.add('open');
lockScroll();

---

✅ 결론

스크롤 관련 처리는 인터랙션과 사용자 경험에 큰 영향을 미칩니다. 이번 시리즈에서 다룬 함수들을 통해 스크롤 제어를 더 유연하고 정교하게 구성할 수 있습니다.