Scroll 이동

종류

1. scroll() : 한번만 지정한 절대좌표로 이동, scrollTo()와 동일

2. scrollTo() : 한번만 지정한 절대좌표로 이동, scroll()와 동일

3. scrollBy() : 지정한 좌표로 계속 이동

4. scrollIntoView() : 특정 element로 스크롤 이동

5. scrollByLines() : 지정한 라인 수 만큼 스크롤 (비표준)

6. scrollByPages() : 지정한 페이지 수 만큼 스크롤 (비표준)

😄 code 1. scroll(), scrollTo()

// HTML
<button onclick="scrollToBtn();">scrollTo()</button>
<button onclick="scrollBtn();">scroll()</button>

// JavaScript
// 절대좌표로 이동하는 scrollTo()
function scrollToBtn() {
  // x축은 그대로, y축은 110px만큼 이동
  window.scrollTo(0, 110);
}

// 절대좌표로 이동하는 scroll()
function scrollBtn() {
  window.scroll({top : 110, left : 0, behavior : "smooth"});
}

• scrollTo()와 scroll()는 동일한 역할을 한다

behavior ?

• behavior : auto (default)
• behavior : "smooth"는 스크롤이 부드럽게 넘어간다
• behavior option을 주고 싶다면 top, left를 추가해야한다.
  • scroll(0, 110)과 scroll(top : 110, left : 0)은 같은 코드이지만 scroll(0,110)에 behavior option을 주면 error가 나오는 것을 확인했다

😄 code 2. scrollBy()

// HTML
<button onclick="scrollByBtn();">scrollBy()</button>

//JavaScript
// 지정한 값만큼 계속 이동
function scrollByBtn() {
    // x축은 그대로 y축으로만 50px만큼 이동
	window.scrollBy(0, 50);
}

• scroll(), scrollTo()와 동일하게 behavior option 부여 가능

😄 code 3. scrollIntoView()

// HTML
<button onclick="scrollIntoViewBtn();">scrollIntoView</button>
// JavaScript
// 클래스 이름이 element인 요소 선택해서 scrollIntoView에 저장
const scrollIntoView = document.querySelector('.element');
function scrollIntoViewBtn() {
    scrollIntoView.scrollIntoView(false);
}

scrollIntoView() option (선택사항)

• true : element의 상단에 초점 맞춰서 보여줌 (default)
• false : element의 하단에 초점 맞춰서 보여줌
• behavior : code 1, code 2와 동일
• block : 수직 스크롤 할 때 요소 위치 옵션, start/center/end/nearest
• inline : 수평 스크롤 할 때 요소 위치 옵션, start/center/end/nearest

😂 code 4. scrollByLines(), scrollByPages()

// page와 line은 양수, 음수 가능
window.scrollByLines(line)
window.scrollByPages(page)

• scrollByLines()와 scrollByPages()는 비표준으로 브라우저 호환성이 좋지 않다. 브라우저 호환을 먼저 확인하고 사용하자

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍