element.scrollIntoView

IT공부중·2021년 2월 22일

frontend

목록 보기

9/16

요즘 웹사이트에서 찾아보면 하나의 페이지만 있고, 상단의 네비게이션 바를 통해 화면을 이동하는 방식을 볼 수 있다. 이러한 페이지는 어떻게 구현하는 것일까? 물론 스크롤을 하나하나 계산해서 이동시킬 수도 있겠지만, element의 메소드인 scrollIntoView를 사용하면 쉽게 구현할 수 있다.

element의 scrollIntoView 메소드는 scrollIntoView가 호출된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤한다.

브라우저 호환성은 다음과 같다. 그냥 기본값으로 사용한다면, IE에서도 사용이 가능할 것 같다.

scrollIntoView의 인자

scrollIntoView는 첫번째 인자로 boolean 값이나, scrollIntoViewOptions 객체를 받을 수 있다.

true 값일 경우에는 { block: 'start', inline: 'nearest'} 와 똑같은 작동한다. 이것이 기본 값이다.

false 일 경우에는 {block: 'end', inline: 'nearest'} 와 같이 작동한다.

scrollIntoViewOptions 객체에는

behavior, block, inline 이라는 속성이 있다.

behavior 은 전한 애니메이션을 정의한다. 기본값은 'auto'이다. 'smooth'를 하면 스크롤이 부드럽게 움직인다.

block 속성은 수직 정렬을 정의한다.

'start', 'center', 'end', 'nearest'가 있고 기본 값은 'start'이다.

inline 속성은 수평정렬을 정의한다.

'start', 'center', 'end,' 'nearest' 중 하나를 선택할 수 있다. 기본 값은 'nearest'이다.

간단한 실습

간단하게 버튼들이 있고, 그 버튼을 누르면 해당 숫자의 화면이 보이는 코드를 짜보았다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <ul class='phase-button'>
        <li><button>1</button></li>
        <li><button>2</button></li>
        <li><button>3</button></li>
        <li><button>4</button></li>
        <li><button>5</button></li>
        <li><button>6</button></li>
        <li><button>7</button></li>
    </ul>
    <ul class='phase'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <script src='index.js'></script>
</body>
</html>

index.css

* {
  margin: 0;
  padding: 0;
}
.phase-button {
  list-style: none;
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  z-index: 2;
}

.phase-button li {
  width: 15%;
  height: 3vh;
}

.phase-button button {
  width: 100%;
  height: 100%;
}

.phase {
  list-style: none;
}

.phase li {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
}
.phase li:nth-child(0) {
  background-color: antiquewhite;
}

.phase li:nth-child(1) {
  background-color: red;
}

.phase li:nth-child(2) {
  background-color: blue;
}

.phase li:nth-child(3) {
  background-color: aqua;
}

.phase li:nth-child(4) {
  background-color: teal;
}

.phase li:nth-child(5) {
  background-color: wheat;
}

.phase li:nth-child(6) {
  background-color: aquamarine;
}

index.js

const phaseNav = document.querySelector('.phase-button');
const phaseButtons = document.querySelectorAll('.phase-button button');
const phase = document.querySelectorAll('.phase li');

phaseNav.addEventListener('click', (e) => {
  const target = e.target;
  if (target.tagName !== 'BUTTON') return;

  const targetIndex = Array.from(phaseButtons).indexOf(target);
  phase[targetIndex].scrollIntoView({
    block: 'start',
    behavior: 'smooth',
  });
});