해당 영역으로 스크롤 이동

버튼을 클릭 했을 때, 해당 영역으로 이동하는 스크립트이다.

• 버튼과 영역의 이미지를 가져온다.

• 순환해서 각 버튼에 이벤트를 걸어줘야하기 때문에 버튼 노드 리스트를 배열로 변환한다.

• 버튼 배열을 순환한다. 이벤트를 걸어준다.

• index를 전달하여 영역의 이미지의 인덱스와 같게 한다.

• scrollIntoView() 메서드를 사용한다.

const makeArray = (arrayLikeObject) => {
  return Array.from(arrayLikeObject)
}

const buttonList = document.querySelectorAll('.scrollView__controlTab')
const sceneList = document.querySelectorAll('.scrollView__scene')
const arrButton = makeArray(buttonList)

const handelScrollButton = function (index) {
// 클로저를 사용   
  return function (e) {
    e.preventDefault()
    sceneList[index].scrollIntoView({ behavior: 'smooth' })
  }
}

arrButton.forEach((item, index) => {
  item.addEventListener('click', handelScrollButton(index))
})

• scrollIntoView() 메서드를 사용한다.

• 버튼리스트를 순환 처리 했기 때문에 이벤트가 클릭 되었을 이벤트 핸들링 함수가 함수를 반환할 수 있도록 설정했다.

참고

• 멘토링 저장소 - 오프라인 - 이듬 주니어 - 2WEEK