scrollIntoView()

포커싱

• 보통 input, textarea 태그 등의 포커싱을 주기 위해 focus()를 사용하는데, li나 div 태그들은 고것이 안 먹힌다.
• 그래서 검색하다 보니 나온 게, scrollIntoView()
• MDN에서의 정의
  • Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.
• 옵션
  • alignToTop(boolean)
    • false일 때: {block: "start", inline: "nearest"}
    • true일 때: {block: "end", inline: "nearest"}
    • 위에서부터 정렬할것이냐 아래에서부터 정렬할 것이냐의 차이
  • behavior
    • 애니메이션 효과
    • "auto": default. 그냥 바로바로 포커싱을 줌
    • "smooth": 단어 그대로 스무스하게 포커싱을 줌.
  • block
    • 위에 말한 것처럼 수직정렬인데 그 위치를 정해주는
    • "start", "center", "end", "nearest"
    • default: "start"
  • inline
    - 수평정렬!
    - "start", "center", "end", "nearest"
    - default: "nearest"