입력 필드의 크기가 조정될 때 스크롤 가능한 Chat Div를 하단에 유지하는 방법은 무엇입니까?

외부 Div 크기가 변경되면 스크롤 가능한 Div가 아래쪽에 고정됨

개요

채팅 애플리케이션에서는 전체를 차지하는 스크롤 가능한 메시지 컨테이너가 있는 것이 일반적입니다. 화면의 대부분. 그러나 입력 필드의 높이가 동적으로 증가하면 사용자의 스크롤 위치가 흐트러질 수 있습니다.

문제

입력 필드가 커지면 외부 div의 높이가 효과적으로 증가하므로, 메시지 컨테이너를 아래로 밀어냅니다. 이로 인해 사용자는 최근 메시지를 보지 못하게 됩니다.

React 기반 솔루션

한 가지 접근 방식은 React의 componentDidUpdate 수명 주기 메서드를 사용하여 입력 필드의 높이를 계산하고 변경되면 메시지 컨테이너에 알리는 것입니다. . 그러나 이는 성능 문제와 과도한 메시지 전달로 이어질 수 있습니다.

Flexbox를 사용하는 CSS 솔루션

보다 효율적인 솔루션은 CSS flexbox를 사용하는 것입니다.

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

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

.chat-input {
  border-top: 1px solid #999;
  padding: 20px 5px;
}

• 플렉스 방향: 열 역방향; 메시지는 컨테이너 하단에 배치됩니다.
• 이렇게 하면 입력 필드가 커져도 메시지가 계속 표시됩니다.

고려 사항

• IE/Edge/Firefox 버그: 이 브라우저는 다음을 사용할 때 스크롤 막대가 사라질 수 있는 버그를 나타냅니다. flex-direction: column-reverse;.
• 해결 방법: 이 문제를 해결하려면 다음 함수를 추가하세요.

function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

• 컨테이너는 하단에 있으며 이러한 브라우저에서 입력 필드의 크기가 조정될 때 스크롤 막대를 조정합니다.

위 내용은 입력 필드의 크기가 조정될 때 스크롤 가능한 Chat Div를 하단에 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!