[JS] scrollY() / scrollTo() / scrollBy() / scroll()

See the Pen [JS] scrollY() / scrollTo() / scrollBy() by mill (@millfeel) on CodePen.

---

scrollY() (=window.pageYOffset)

Window 인터페이스의 scrollY 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환한다. 

var y = window.scrollY

Q. window.pageYOffset과 window.scrollY의 차이는?

- 호환성에서 차이가 있다.

- window.pageYOffset가 호환성이 약간 더 좋다.

- 공통으로 IE8은 지원하지 않는다.

---

scrollBy()

기존 스크롤 값에 설정한 값만큼  + / - 된다.

// 대상이 window
window.scrollBy(x, y);
window.scrollBy({ // 값이 옵션인 경우
  top: y,
  left: x,
  behavior: 'smooth'
});

// 대상이 element
element.scrollBy(x, y);
element.scrollBy({ // 값이 옵션인 경우
  top: y,
  left: x,
  behavior: 'smooth'
});

[주의] 값은 모두 픽셀로 설정돼 있기 때문에 "숫자"만 입력한다.

 

Q. 옵션을 설정한것과 아닌것에 차이가 있나요?

첨부한 코드펜의 버튼을 클릭해서 차이를 비교해보자.

- 옵션이 없는 경우, 좌표 값이 이동할 때 뚝뚝 끊기는 느낌

- 옵션이 있는 경우, 좌표 값이 이동할 때 부드러운 느낌

---

scrollTop() (=scroll())

설정한 값으로 "이동"한다. 옵션은  scrollBy()의 옵션 설명과 동일하다.

// 대상이 window
window.scrollTo(x, y);
window.scrollTo({ // 값이 옵션인 경우
  top: y,
  left: x,
  behavior: 'smooth'
});

// 대상이 element
element.scrollTo(x, y);
element.scrollTo({ // 값이 옵션인 경우
  top: y,
  left: x,
  behavior: 'smooth'
});

[주의] 값은 모두 픽셀로 설정돼 있기 때문에 "숫자"만 입력한다.

Q. window.scrollTop()과 window.scroll()의 차이는?

MDN Window.scroll()를 보면 "사실상 동일하다"고 기술돼 있다.

*element.scroll()에는 동일하다고 적혀있지 않음. 비교해 보는건 나중에 시간이 될 때...

*참고로 scroll()에도 동일한 옵션 기능이 있다.

---

[공부좌표]

scrollY

pageYOffset

window.scrollBy()

Element.scrollBy()

window.scrollTo()

Element.scrollTo()

window.scroll()

Element.scroll()