scrollIntoView: ref로 선택된 목록이 화면에 들어오도록 스크롤 이동하기

재생중인 리스트 태그를 선택할 ref를 만듭니다.

 

  const currentSongRef = useRef(null);

 

현재 재생중인 노래 리스트를 ref={currentSongRef} 로 선택합니다.

 

                <li key={song.etag}

                  className={currentSong === song ? "playing" : ""}

                  onClick={() => handleClickSong(song)}

                  ref={currentSong === song ? currentSongRef : null}>

                </li>

 

선택된 태그를 scrollIntoView 메서드로 block:"center"로 이동시킵니다.

  useEffect(() => {

    if (currentSongRef.current) {

      currentSongRef.current.scrollIntoView({

        behavior: "smooth",

        block: "center",

      });

    }

  }, [currentSongRef, currentSong]);

 

=> currentSong이 바뀔 때마다 스크롤 바의 위치가 선택된 태그를 중앙에 보이도록 이동합니다.

 

가장 마지막 노래의 재생이 끝나면,

첫번째 리스트가 보이도록 스크롤이 따라 이동합니다.