테이블의 자동 스크롤 효과에서 헤더를 초과 한 후 신체 부위가 사라지는 문제를 해결하는 방법은 무엇입니까?

자동 테이블 스크롤링 : 헤더가 넘치는 콘텐츠 문제 해결

테이블의 자동 스크롤 효과를 생성 할 때는 종종 어려운 문제가 발생합니다. 테이블의 주요 내용은 헤더를 넘어 스크롤되어 사라져 시각적 효과와 사용자 경험에 영향을 미칩니다. 이 기사는 문제의 근본 원인을 분석하고 CSS 솔루션을 제공합니다.

문제 : 콘텐츠는 헤더가 넘치게됩니다

애니메이션을 사용하여 테이블을 자동으로 스크롤 할 때 TBody는 아래 그림과 같이 사라지기 전에 헤더를 넘어 스크롤 할 수 있습니다.

(그림 : 스크롤 할 때 헤더를 초과 한 후에도 테이블 행이 여전히 보입니다)

다음은 샘플 코드입니다.

일련 번호	강철 수준	사양	영역	라이브러리 위치 번호
1	1000	스물 두 번째	에이	121

/*테이블 스크롤 애니메이션*/
@keyframes 테이블 {
  0% {변환 : Translatey (0); }
  100% {변환 : Translatey (-100%); }
}

.table tbody {
  애니메이션 : 표 10S 무한 선형;
}

문제의 근본 원인을 분석하십시오

문제는 tbody 요소의 애니메이션이 컨텐츠가 테이블 컨테이너의 가시 영역을 초과하게한다는 것입니다. overflow: hidden tbody 의 숨겨진 속성은 전체 테이블이 아니라 tbody 자체 컨텐츠에만 작용하기 때문에 유효하지 않습니다.

해결책 : CSS 스타일 조정

tbody 컨텐츠가 테이블 헤더가 넘치지 않도록하려면 .table 및 .table thead 의 CSS 스타일을 조정해야합니다.

 /*테이블 스크롤 애니메이션*/
@keyframes 테이블 {
  0% {변환 : Translatey (0); }
  100% {변환 : Translatey (-100%); }
}

.테이블 {
  오버플로 : 숨겨진; /* 테이블 컨테이너 너머의 콘텐츠 숨기기*/
}

.table thead {
  위치 : 상대; /* 상대 위치 사용*/
  z- 인덱스 : 1; / * 레벨을 개선하고 tbody */
  배경색 : #fff; /* 테이블 헤더 배경색이 스크롤 컨텐츠를 덮는지 확인하십시오*/
}

.table tbody {
  애니메이션 : 표 10S 무한 선형;
}

overflow: hidden .table 에 숨겨져 있습니다. 테이블 컨테이너 이외의 모든 컨텐츠가 숨겨져 있습니다. 한편, .table thead 상대적 위치로 설정하고 z-index 값을 증가시켜 항상 tbody 위에 놓여서 넘치는 콘텐츠를 효과적으로 다루십시오. background-color 추가하면 테이블 헤더의 배경색이 틈을 피하기 위해 스크롤 컨텐츠를 덮을 수 있습니다. 이렇게하면 테이블 내용이 헤더가 넘쳐나는 문제를 해결하고 깨끗하고 깔끔한 자동 스크롤 효과를 얻습니다.

위 내용은 테이블의 자동 스크롤 효과에서 헤더를 초과 한 후 신체 부위가 사라지는 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!