외부 Div의 크기가 조정될 때 스크롤 가능한 Div를 맨 아래에 고정하려면 어떻게 해야 합니까?

외부 Div의 크기를 조정할 때 스크롤 가능한 Div가 아래쪽에 고정됨

이 문서에서는 유동적으로 크기가 조정되는 외부 div 내의 스크롤 동작과 관련된 문제를 다룹니다. 목표는 외부 div의 높이 변경에도 불구하고 내부 div인 .messages-container의 하단 근처에서 스크롤 위치를 유지하는 것입니다.

문제는 .text-input 필드가 동적으로 확장될 때 발생합니다. 사용자는 대화의 하단 메시지를 보지 못하게 됩니다.

CSS를 사용한 해결 방법(flex-direction: 열 역방향)

선호되는 솔루션은 .messages-container div에 대한 CSS의 flex-direction: 열 역방향 속성을 활용합니다. 이 접근 방식은 널리 사용되는 채팅 애플리케이션에서 관찰되는 동작을 모방하여 컨테이너 하단에 메시지를 정렬합니다. 또한 메시지가 없는 경우에도 스크롤바가 계속 표시되도록 보장합니다.

.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

주의 사항 및 브라우저 호환성

그러나 이 접근 방식은 IE에서 버그가 발생할 수 있습니다. 스크롤 막대가 보이지 않는 /Edge/Firefox.

해결 방법 IE/Edge/Firefox

이 문제를 해결하기 위해 flex-direction:column-reverse의 동작을 모방하는 해결 방법을 사용할 수 있습니다.

// scroll to bottom
function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

// only shift-up if at bottom
function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

이러한 기능을 통합하여 코드에 추가하면 IE/Edge/Firefox가 flex-direction과 동일한 스크롤 동작을 나타내도록 할 수 있습니다. 열 역방향.

// ...

if (atbottom && (!isWebkit || isEdge)) {
  updateScroll(msgdiv);
}

위 내용은 외부 Div의 크기가 조정될 때 스크롤 가능한 Div를 맨 아래에 고정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!