JS : 스크롤 동적처리 1. scrollTo, scrollBy, offsetTop, scroll-behavior

 

window.scrollTo( X, Y )

window.scrollTo({ X좌표, Y좌표 })

문서의 지정된 위치로 스크롤을 이동합니다.

* X, Y좌표는 문서의 왼쪽 상단부터 시작합니다.

* X, Y좌표는 px 단위의 가로/세로 축입니다.

* X 좌표의 경우는 가로스크롤이 있을 경우만 동작합니다.

* 사용 전 충분한 세로 스크롤 길이가 필요합니다.

▼ window.scrollTo( ) 작성예시

window.scrollTo(0, 100)

window.scrollTo({left:0, top:100})

 

 

▼ window.scrollTo( ) 사용 예시

<button type="button" id="btn">위치이동</button>

const btn = document.querySelector('#btn')
btn.addEventListener('click',function(){
	//window.scrollTo(0, 100) //or
	window.scrollTo({left:0, top:100})
})

See the Pen JS-window_scrollTo by yuna122212 (@yuna122212) on CodePen.

 

---

 

window.scrollBy( X, Y )

window.scrollBy({ X좌표, Y좌표 })

현재 위치 기준 좌표값으로 스크롤을 이동합니다.

* scrollTo 와 다른 점은 현재 스크롤 위치를 기준으로 상대적으로 이동합니다.

* 기본 작성방법은 scrollTo 와 동일합니다.

 

▼ window.scrollBy( ) 사용 예시

<button type="button" id="btn">위치이동</button>

const btn = document.querySelector('#btn')
btn.addEventListener('click',function(){
	//window.scrollBy(0, 100) //or
	window.scrollBy({left:0, top:100})
})

See the Pen JS-window_scrollBy by yuna122212 (@yuna122212) on CodePen.

 

 

---

 

 

 

window 기준 스크롤 위치가 아닌 특정 요소의 위치로 스크롤을 이동하고 싶다면?

DOM.offsetTop

* 특정 요소(Tag, id, class)의 위치를 저장해주는 속성입니다.

* scrollTo 등의 메서드와 함께 활용하여 해당 요소의 위치로 이동할 수 있습니다.

* 상황에 따라 offsetTop, offsetWidth, offsetHeight 속성을 사용할 수 있습니다.

* offsetWidth, offsetHeight 속성은 스크롤 이동이 아닌

   요소의 가로/세로 크기를 파악하여 다른 동적 스크립트를 적용할 경우 사용합니다.

* 사용 전 충분한 세로 스크롤 길이가 필요합니다.

<button type="button" id="btn">offsetTop위치확인</button>
<div class="box">box</div>

const btn = document.querySelector('#btn')
const box_pst = document.querySelectorAll('.box')[0].offsetTop

btn.addEventListener('click',function(){
  // window.scrollTo(0, box_pst) //or
  //window.scrollTo({left:0, top:box_pst}) //or
  window.scrollTo({left:0, top:box_pst-100}) //산술연산 추가 활용 가능
})

See the Pen JS-window_offsetTop by yuna122212 (@yuna122212) on CodePen.

 

 

---

 

 

scroll-behavior (css)

웹페이지에 부드러운 스크롤을 적용합니다.

* 아이디(id)와 링크 이동을 활용한 웹 페이지 제작 시 별도의 자바스크립트 없이

간단한 스크롤 애니메이션 동작을 제작할 수 있습니다.

* html, body css 선택자에 적용합니다.

* 스크롤 이동 애니메이션기능이기 때문에 사용 전 충분한 세로 스크롤 길이가 필요합니다.

▼ scroll-behavior 적용 예시

<a href="#pst1">위치1로 이동하기</a>
<a href="#pst2">위치2로 이동하기</a>

<div id="pst1">위치1</div>
<div id="pst2">위치2</div>

body, html {scroll-behavior:smooth;}

 

 

 

▼ behavior 는 javascript의 scroll 동적 메서드에도 속성으로 사용할 수 있습니다.

window.scrollTo({ X좌표, Y좌표, behavior:'smooth' })

window.scrollTo({left:0, top:0, behavior:'smooth'})

See the Pen JS-scroll-behavior by yuna122212 (@yuna122212) on CodePen.

 

---