CSS만 사용하여 DIV를 아래쪽으로 동적으로 스크롤하는 동안 위쪽으로 점프하는 것을 방지하는 방법은 무엇입니까?

상향 점프를 방지하면서 DIV를 아래쪽으로 동적으로 스크롤

문제 개요

자동으로 DIV 요소를 설정하려고 합니다. 로드 시 아래쪽으로 스크롤되며 사용자가 위쪽으로 스크롤하지 않는 한 이 스크롤 위치를 유지합니다. 이 동작은 DIV 내의 콘텐츠를 동적으로 업데이트하여 새로 추가된 콘텐츠가 갑자기 위로 이동하지 않고 맨 아래에 계속 표시되도록 하는 데 필요합니다.

해결책

CSS -이 원하는 동작을 달성할 수 있는 솔루션은 다음과 같습니다.

1단계: Flexbox 구성

DIV 내의 콘텐츠 흐름을 반대로 바꾸려면 flex-direction:column-reverse를 사용하세요. . 이렇게 하면 브라우저가 하단을 상단으로 처리하여 처음에는 효과적으로 하단으로 스크롤합니다.

2단계: 마크업 반전

콘텐츠 순서가 반전되므로 마크업은 역순으로 구성되어 있으며 표시하려는 콘텐츠가 맨 아래에 먼저 표시됩니다.

CSS 코드:

<code class="css">.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}</code>

HTML 코드:

<code class="html"><div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <!-- Additional content here -->
  <div>Top</div>
</div></code>

설명:

이 설정을 사용하면 콘텐츠가 처음에 "하단" 요소로 스크롤됩니다. 새 콘텐츠가 동적으로 추가되면 DIV의 '하단'에 배치되고 Flexbox 레이아웃은 자동으로 DIV를 아래쪽으로 스크롤하며 사용자가 다시 아래쪽으로 스크롤할 때 위쪽으로 점프하는 것을 방지합니다.

위 내용은 CSS만 사용하여 DIV를 아래쪽으로 동적으로 스크롤하는 동안 위쪽으로 점프하는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!