크기 조정 가능한 외부 Div의 맨 아래에 스크롤 가능한 Div를 고정하는 방법은 무엇입니까?

외부 div의 크기가 변경될 때 스크롤 가능한 div가 아래쪽에 고정됩니다

채팅 애플리케이션에서는 다음을 포함하는 다른 div 내에 스크롤 가능한 div가 있는 것이 일반적입니다. 대화 내역. 하단의 입력 필드가 커지거나 작아지는 등 외부 div의 크기가 변경되는 경우 스크롤 가능한 div는 대화 하단의 위치를 ​​유지해야 합니다.

CSS를 사용한 해결 방법

플렉스 방향 사용: 열 역방향; 외부 div의 속성을 사용하면 JavaScript 없이 이 동작을 달성할 수 있습니다. 이 속성은 본질적으로 하위 요소의 순서를 뒤집어 스크롤 가능한 div를 맨 아래에 배치합니다.

.outer-div {
  display: flex;
  flex-direction: column-reverse;
}

.scrollable-div {
  flex: 1;
  overflow: auto;
}

그러나 이 솔루션에는 단점이 있습니다. Firefox, IE 및 Edge와 같은 특정 브라우저.

숨겨진 스크롤 막대에 대한 솔루션

숨겨진 스크롤 막대를 수정하려면 스크롤바 문제가 있는 경우 다음 CSS를 추가할 수 있습니다.

/* Reset webkit, including edge */
.scrollable-div-text {
  overflow: visible;
}

@supports (-ms-accelerator: true) {
  .scrollable-div-text {
    overflow: auto;
  }
}

이렇게 하면 첫 번째 div 내에 두 번째 스크롤 가능한 div가 효과적으로 생성되어 스크롤바가 계속 표시되도록 합니다.

구현 세부정보

// Check if at bottom of scrollable div
function scrollAtBottom(el) {
  return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

// Update scroll position if at the bottom
function updateScroll(el) {
  el.scrollTop = el.scrollHeight;
}

// Function to resize input and adjust scroll position if needed
function resizeInput() {
  const scrollableDiv = document.getElementById('scrollable-div');
  const input = document.getElementById('input');
  
  // Toggle input height
  input.style.height = input.style.height === '40px' ? '120px' : '40px';

  // Check if scrolled to the bottom and update scroll position if needed
  if (scrollAtBottom(scrollableDiv)) {
    updateScroll(scrollableDiv);
  }
}

위 스크립트에서 resizeInput() 함수는 스크롤 막대가 스크롤 가능한 div의 하단에 있는지 확인하고 스크롤 위치를 조정합니다. 필요하다면.

위 내용은 크기 조정 가능한 외부 Div의 맨 아래에 스크롤 가능한 Div를 고정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!