CSS HTML JS jQuery | 스크롤 이동 $(window).scrollTop() :: scrollTo()

 

 

<div id="container">
  <p>
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this
    at a distance of roughly ninety-two million miles is an utterly
    insignificant little blue green planet whose ape-descended life forms are so
    amazingly primitive that they still think digital watches are a pretty neat
    idea.
  </p>
</div>

<div id="output">scrollTop: 0</div>

 

• <div id="container">
  • 이 컨테이너에는 스크롤 가능한 긴 텍스트가 들어 있습니다.
  • CSS에서 overflow: scroll 속성이 적용되어 스크롤이 가능한 박스가 됩니다.
  • 스크롤 이벤트를 감지하는 대상이 됩니다.
• <div id="output">
  • 스크롤이 발생할 때마다 스크롤 위치를 보여주는 텍스트 영역입니다.
  • 초기 값은 scrollTop: 0으로 설정됩니다.
  • 자바스크립트를 통해 스크롤 위치가 변경될 때마다 scrollTop의 값을 갱신합니다.

 

#container {
  overflow: scroll;
  height: 200px;
  width: 200px;
  border: 5px dashed orange;
}


//padding: 콘텐츠(텍스트, 이미지 등)와 요소의 경계(테두리) 사이의 안쪽 여백을 설정
//1rem: 상하(padding-top, padding-bottom) 여백이 1rem로 설정
//0: 좌우(padding-left, padding-right) 여백이 0으로 설정
#output {
  padding: 1rem 0;
}

 

• #container 스타일
  • overflow: scroll: 스크롤을 항상 표시합니다. (스크롤바가 필요 없더라도 표시됨)
  • height: 200px; width: 200px: 너비와 높이가 200x200 크기입니다.
  • border: 5px dashed orange: 오렌지색의 5px 점선 테두리가 추가됩니다.
• #output 스타일
  • padding: 1rem 0:
    • 상하 패딩(위, 아래)은 16px(1rem = 16px)
    • 좌우 패딩(왼쪽, 오른쪽)은 0px으로 설정됩니다.
    • 이 영역은 스크롤 위치를 보여주는 영역입니다.

 

javascript

const container = document.querySelector("#container");
const output = document.querySelector("#output");

container.addEventListener("scroll", (event) => {
  output.textContent = `scrollTop: ${container.scrollTop}`;
});

 

• document.querySelector("#container"): 스크롤 가능한 컨테이너를 선택합니다.
• document.querySelector("#output"): 스크롤 위치를 표시할 영역을 선택합니다.

 

 

• scroll 이벤트: 스크롤할 때마다 실행되는 이벤트입니다.
• container.scrollTop:
  • 이 속성은 **현재 컨테이너의 스크롤 위치(수직 스크롤 값)**를 나타냅니다.
  • 0부터 시작하며, 사용자가 아래로 스크롤할 때마다 스크롤 픽셀 값이 증가합니다.
• output.textContent:
  • 스크롤 이벤트가 발생할 때마다 현재 스크롤 위치 값을 출력합니다.
  • output의 내용이 scrollTop: [현재 위치]로 동적 업데이트됩니다.

jQuery

$("#container").on("scroll", function () {
  $("#output").text(`scrollTop: ${$(this).scrollTop()}`);
});

 

• $()는 jQuery 선택자
• .on('scroll')은 이벤트 리스너 추가
• .scrollTop()은 스크롤 위치 가져오기
• .text()는 콘텐츠 업데이트