[Web API] scrollIntoView

Element.scrollIntoView는 element의 부모 컨터이너를 scrollIntoViewOptions에 따라 element가 보이도록 스크롤합니다.

 

Element.scrollIntoView()

// 또는

Element.scrollIntoView(alignToTop)

// 또는

Element.scrollIntoView(scrollIntoViewOptions)

 

매개변수

• alignToTop
  • true element의 top이 스크롤 가능한 부모 컨테이너의 top과 정렬됩니다.
    scrollIntoViewOptions: {block: "start", inline: "nearest"}와 동일한 동작을 합니다.
    default 동작입니다.
  • false element의 bottom이 스크롤 가능한 부모 컨테이너의 bottom과 정렬됩니다.
    scrollIntoViewOptions: {block: "end", inline: "nearest"}와 동일한 동작을 합니다.

또는

• scrollToOptions
  • block 상위 컨테이너 내에서 수직 정렬을 정의합니다.
    • start element의 top을 스크롤 가능한 컨테이너의 상단과 맞춥니다.
      default 값입니다.
    • center 스크롤 가능한 컨테이너의 중앙에 element를 정렬합니다.
    • end element의 bottom을 스크롤 가능한 컨테이너의 하단과 맞춥니다.
    • nearest element를 수직방향으로 가장 가까운 가장자리로 스크롤합니다. 요소가 스크롤 가능한 컨테이너의 상단 가장자리에 더 가깝다면 상단으로 정렬되고, 하단에 가깝다면 하단에 정렬됩니다.
  • inline 상위 컨테이너 내에서 수평 정렬을 정의합니다.
    • start element의 left을 스크롤 가능한 컨테이너의 왼쪽과 맞춥니다.
      default 값입니다.
    • center 스크롤 가능한 컨테이너의 중앙에 element를 정렬합니다.
    • end element의 right을 스크롤 가능한 컨테이너의 d오른쪽과 맞춥니다.
    • nearest element를 수평방향으로 가장 가까운 가장자리로 스크롤합니다. 요소가 스크롤 가능한 컨테이너의 왼쪽 가장자리에 더 가깝다면 왼쪽으로 정렬되고, 오른쪽에 가깝다면 오른쪽에 정렬됩니다.
  • behavior 스크롤을 즉시적용할지 아니면 부드러운 애니메이션을 적용할지 결정
    • smooth 스크롤이 부드럽게 움직임
    • instant 스크롤이 즉시 적용
    • auto 스크롤 동작이 계산된 scroll-behavior값에 의해 결정