scrollY와 scrollTop의 차이점

1. scrollY

• window.scrollY는 브라우저의 수직 스크롤 위치를 나타내는 읽기 전용 속성으로, 페이지의 최상단으로부터 현재 스크롤된 픽셀 값을 반환한다.
• 이를 통해 사용자는 페이지가 얼마나 스크롤되었는지 확인하거나 특정 동작을 트리거할 수 있다.

🌟 개념

• 대상: window 객체
• 값의 반환: 페이지의 최상단부터 현재 뷰포트의 위치까지의 스크롤 거리 (단위: 픽셀)
• 읽기 전용: 값을 직접 설정할 수는 없지만, 다른 메서드(scrollTo, scrollBy)를 사용해 조작할 수 있다.
• 초기 값: 스크롤이 없는 상태(페이지 최상단)에서는 0을 반환함

🌟 사용

1. 스크롤 이벤트 처리
   스크롤 시 특정 동작을 수행하거나 UI를 업데이트할 때 사용한다.

   window.addEventListener("scroll", () => {
     if (window.scrollY > 100) {
       console.log("스크롤이 100px 이상 내려갔습니다.");
     }
   });

2. 페이지의 특정 지점에서 UI 변경
   스크롤 위치에 따라 헤더를 축소하거나, 특정 요소를 표시할 때 사용한다.

   const header = document.querySelector(".header");
   
   window.addEventListener("scroll", () => {
     if (window.scrollY > 50) {
       header.classList.add("scrolled");
     } else {
       header.classList.remove("scrolled");
     }
   });

3. Top 버튼 활성화
   스크롤이 일정 이상 내려갔을 때 상단으로 이동하는 버튼을 표시할 때 사용한다.

   const topButton = document.querySelector(".top-button");
   
   window.addEventListener("scroll", () => {
     topButton.style.display = window.scrollY > 200 ? "block" : "none";
   });

🌟 동작

scrollY는 브라우저 창(viewport)에서 페이지 내용(document)의 상단으로부터 현재 스크롤된 거리(세로 방향)를 측정한다.

1. 페이지를 열었을 때 스크롤하지 않으면

   console.log(window.scrollY); // 0

2. 사용자가 300px만큼 스크롤하면

   console.log(window.scrollY); // 300

🌟 scrollY와 관련된 메서드

1. scrollTo(): 특정 위치로 스크롤

   window.scrollTo({ top: 500, behavior: "smooth" });

2. scrollBy(): 현재 위치를 기준으로 스크롤

   window.scrollBy({ top: 200, behavior: "smooth" }); // 현재 위치에서 200px 더 스크롤

3. scrollIntoView(): 특정 요소를 화면에 표시

   document.querySelector(".target").scrollIntoView({ behavior: "smooth" });

🌟 한계점

1. 가로 스크롤
   scrollY는 세로 스크롤 전용이며, 가로 스크롤의 위치를 확인하려면 window.scrollX를 사용해야 한다.

   console.log(window.scrollX); // 페이지의 가로 스크롤 위치

2. CSS에서 overflow: hidden일 경우
   브라우저가 스크롤되지 않는 상태에서는 scrollY 값이 항상 0으로 유지된다.

---

2. scrollTop

• scrollTop은 DOM 요소의 수직 스크롤 위치를 나타내는 속성으로, 요소 내에서 스크롤된 수직 거리를 픽셀 단위로 반환하거나 설정한다.
• 이 속성은 주로 스크롤을 제어하거나 스크롤 상태를 확인할 때 사용된다.
• 예를 들어, 사용자가 페이지를 스크롤할 때의 위치를 추적하거나 스크롤 위치를 제어할 수 있다.

🌟 개념

• scrollTop 값은 요소의 상단으로부터의 거리를 나타낸다.
• 양수 값: 페이지나 요소 내에서 스크롤이 내려진 위치
• 0: 스크롤이 가장 위에 있을 때 (요소가 처음 상태일 때)
• 음수 값: scrollTop은 기본적으로 음수 값을 반환하지 않으며, 음수 값은 보통 요소의 스크롤을 위로 설정할 수 없기 때문에 0이 최소값이 된다.

🌟 사용

1. 스크롤 위치 확인
   scrollTop을 사용하여 스크롤된 양을 알 수 있다.
   예를 들어, 페이지에서 스크롤 이벤트가 발생할 때, 스크롤된 거리를 추적할 수 있다.

   const element = document.getElementById("my-element");
    console.log(element.scrollTop); // 요소의 현재 스크롤 위치 반환

2. 스크룰 위치 설정
   scrollTop을 사용하여 스크롤 위치를 수동으로 설정할 수도 있다.
   예를 들어, 페이지나 특정 요소를 스크롤해서 위나 아래로 이동시킬 때 사용할 수 있다.

   const element = document.getElementById("my-element");
    element.scrollTop = 100; // 100px만큼 스크롤을 내림

3. 스크롤 이벤트와 함께 사용
   스크롤 위치를 동적으로 추적하는 데 유용하다.
   예를 들어, 스크롤이 내려가면 어떤 동작을 수행하는 등의 기능을 구현할 때 사용한다.

   const element = document.getElementById("my-element");
   
    element.addEventListener("scroll", () => {
      console.log("현재 스크롤 위치: ", element.scrollTop);
    });

🌟 동작

• scrollTop은 수직 스크롤에만 영향을 미친다. 수평 스크롤의 경우에는 scrollLeft라는 속성을 사용한다.
• scrollTop은 주로 div나 textarea와 같은 스크롤 가능한 요소에서 많이 사용된다.
• 브라우저 창 전체의 스크롤 위치를 확인하고 제어하려면 document.documentElement.scrollTop이나 window.scrollY를 사용해야 한다.

🌟 예시: 스크롤 위치를 이용한 부드러운 스크롤

function scrollToTop() {
  const element = document.getElementByID("my-element");
  let currentPosition = element.scrollTop;
  let targetPosition = 0;
  
  // 부드럽게 스크롤 이동하는 함수
  function smoothScroll() {
    const step = (currentPosition - targetPosition) / 10;
    if (Math.abs(currentPosition - targetPosition) > 1) {
      currentPosition -= step;
      element.scrollTop = currentPosition;
      requestAnimationFrame(smoothScroll); // 애니메이션 프레임에 맞춰 계속 실행
    } else {
      element.scrollTop = targetPosition;
    }
  }
  smoothScroll();
} 

🌟 scrollTop과 관련된 다른 속성

1. scrollHeight: 요소의 전체 콘텐츠 높이를 반환한다. 이 값은 스크롤 가능한 콘텐츠의 높이를 의미하며, scrollTop은 이값을 기준으로 위치를 설정하거나 확인한다.

2. clientHeight: 요소의 보이는 높이를 반환한다. 스크롤 가능한 부분의 실제 높이를 나타낸다.

3. scrollLeft: 수평 스크롤 위치를 설정하거나 반환하는 속성이다.

🌟 한계점

1. 자동 스크롤
   scrollTop을 통해 수동으로 스크롤 위치를 설정할 수 있지만, 매우 큰 콘텐츠나 동적 페이지에서 자동으로 스크롤을 조정하는 데 있어 때때로 부드럽지 않거나 예기치 않은 결과를 초래할 수 있다.

2. 브라우저 호환성
   대부분의 최신 브라우저는 scrollTop을 지원하지만, 구형 브라우저에서는 제한이 있을 수 있다.
   예를 들어, 특정 HTML 요소에 대해 scrollTop을 사용할 때 일부 모바일 브라우저에서 호환성 문제나 불완전한 구현이 있을 수 있다.

---

3. 왜 window.scrollTop은 없을까?

window.scrollTop이 없는 이유는 window 객체에서 스크롤 정보를 제공하는 방식이 다르기 때문이다.
브라우저는 페이지 전체의 스크롤 상태를 window 객체를 통해 노출하며, 이는 scrollY나 scrollX 속성을 통해 확인할 수 있다.
반면, scrollTop은 개별 DOM 요소의 스크롤 위치를 나타내는 속성이므로 window와는 별개이다.

🌟 scrollY vs. scrollTop

속성	대상	설명
window.scrollY	window 객체	브라우저 창의 수직 스크롤 위치를 픽셀 단위로 나타낸다.
scrollTop	스크롤 가능한 DOM 요소	특정 DOM 요소 내부에서의 수직 스크롤 위치를 픽셀 단위로 나타낸다.

• 예시: scrollY

  window.addEventListener("scroll", () => {
    console.log(`창의 스크롤 위치: ${window.scrollY}px`);
  });

  • window.scrollY는 브라우저 창 전체의 스크롤 상태를 반환한다.
  • 전역적인 스크롤 위치를 확인하거나 제어하는 데 사용된다.

• 예시: scrollTop

  const element = document.getElementById("my-element");
   element.scrollTop = 100; // 특정 요소 내부의 스크롤 위치를 설정
   console.log(`요소 내부 스크롤 위치: ${element.scrollTop}px`);

  • scrollTop은 특정 스크롤 가능한 요소의 상태를 나타낸다.
  • 개별 DOM 요소의 스크롤을 확인하거나 조작하는 데 사용된다.

---

4. 페이지 전체 스크롤에 scrollTop을 사용할 수 있을까?

브라우저 창 전체의 스크롤 위치를 scrollTop을 통해 확인하려면 document.documentElement.scrollTop이나 document.body.scrollTop을 사용할 수 있다.
하지만 이 방식은 구형 브라우저와의 호환성 문제를 야기할 수 있다.
현대 브라우저에서는 window.scrollY를 사용하는 것이 권장된다.

---

5. 차이점

	scrollY	scrollTop
대상	window 객체	특정 DOM 요소
역할	브라우저 전체 페이지의 수직 스크롤 위치를 반환함	스크롤 가능한 DOM 요소 내부의 수직 스크롤 위치를 반환하거나 설정함
단위	픽셀(px)	픽셀(px)
기능	읽기 전용 값을 직접 수정할 수 없음 스크롤 위치를 변경하려면 window.scrollTo() 또는 window.scrollBy()를 사용해야 함	읽기/쓰기 가능 값을 직접 읽거나 수정하여 요소의 스크롤 위치를 확인하거나 이동할 수 있음
사용 목적	페이지 전체의 스크롤 상태를 추적하거나 이벤트를 트리거하는 데 사용됨	특정 요소의 내부 스크롤 상태를 추적하거나 스크롤을 조작하는 데 사용됨