뷰포트에 있을 때만 Javascript 스크롤 IntoView

Question

모형을 만들었습니다(동영상이 재생되는 동안 새 텍스트 줄로 스크롤하기 때문에 공백을 사용한다는 점에 유의하세요). 저는 'nearest' 블록과 함께 scrollIntoView를 사용하고 있습니다.

문제는 전체 페이지가 스크롤되기 때문에 여전히 페이지를 스크롤한다는 것입니다. div 줄의 활성 텍스트 줄로 스크롤하기를 원합니다(표시될 필요는 없음). 왜냐하면 "동영상" div를 보면 계속해서 아래로 스크롤되기 때문입니다(원치 않는 동작입니다).

으아악 으아악 으아악

Answer 1

당신이 발견한 바와 같이, scrollIntoView()는 여기서 수행하려는 작업에 적합하지 않습니다. 요소를 보기 위해 여러 보기 창을 공격적으로 스크롤합니다.

더 적절한 것은 element.scrollTo(..) （在本例中为 .lines상위 요소입니다). 뷰포트에서 요소를 중앙에 배치하려면 몇 가지 고급 연산을 수행해야 하지만 비교적 간단합니다.

으아악 으아악 으아악