HTML 테이블에서 현재 표시되는 위쪽 및 아래쪽 행을 결정하는 JS/VueJS 구현

Question

thead와 tbody를 포함하는 표준 HTML 테이블이 있는데, tbody의 행 수는 배열 크기에 따라 달라지므로 임의의 숫자가 될 수 있습니다.

테이블에는 스크롤할 수 있는 최대 높이가 있습니다. 테이블이 스크롤되면서 새로 표시된 위쪽 및 아래쪽 행을 계산할 수 있기를 원합니다.

또한 이를 달성하기 위해 jquery를 사용할 수 없으며 단지 javascript를 사용하고 싶습니다.

이 질문에 대해 허용된 답변을 시도했지만 부정확한 것 같고 때로는 2-7 행의 수를 잘못 계산하는 것 같습니다... html 테이블에서 맨 위 행 결정

Answer 1

IntersectionObserver API를 사용하여 상위 테이블에 보이는 행을 확인할 수 있습니다. 각 행에 교차 관찰자를 추가하고 isIntersecting을 사용하여 행이 표시되는지 확인합니다.

으아악

표시되는 첫 번째 행과 마지막 행 수를 계산하려면 표시 여부가 변경될 때 "visibleElements" 배열에 각 행을 추가하거나 제거하거나 "visible" 클래스를 전환하면 됩니다.