CSS만 사용하여 로드 시 Div 스크롤을 맨 아래로 만들고 사용자 스크롤 위치를 유지하려면 어떻게 해야 합니까?

사용자 스크롤과 동기화된 동적 스크롤 Div

div가 로드될 때 자동으로 아래쪽으로 스크롤되는 솔루션을 찾고 있습니다. 사용자가 수동으로 위로 스크롤할 때까지 위치를 스크롤하시겠습니까? 이 독창적인 질문은 이 효과를 달성하기 위한 영리한 CSS 전용 기술을 탐구합니다.

솔루션 이해

비결은 flex를 사용하여 div 내의 요소 순서를 바꾸는 데 있습니다. -방향: 열 반대. 본질적으로 브라우저는 div의 하단을 상단인 것처럼 처리합니다.

구현

이 기술을 구현하려면 Overflow: auto 및 CSS 스타일 내에서 flex-direction:column-reverse를 설정합니다.

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

그런 다음 동적 콘텐츠가 컨테이너 내에서 역순으로:

<div class="container">
  <div>Bottom</div>
  <div>...</div>
  <div>Top</div>
</div>

주의사항

이 기술은 Flexbox를 지원하는 브라우저에서만 작동한다는 점을 명심하세요.

위 내용은 CSS만 사용하여 로드 시 Div 스크롤을 맨 아래로 만들고 사용자 스크롤 위치를 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!