JavaScript로 오버플로된 DIV 스크롤

StackOverflow https://stackoverflow.com/questions/13362

문제

크기가 조정되고 페이지 주위로 드래그될 때 div 내부의 내용을 유지하기 위해 Overflow:auto를 사용하는 div가 있습니다.저는 일부 Ajax를 사용하여 서버에서 텍스트 줄을 검색한 다음 이를 div 끝에 추가하므로 콘텐츠가 아래쪽으로 늘어납니다.이런 일이 발생할 때마다 채팅방이나 명령줄 콘솔이 작동하는 방식과 유사하게 JS를 사용하여 div를 맨 아래로 스크롤하여 가장 최근에 추가된 콘텐츠가 표시되도록 하고 싶습니다.

지금까지 나는 이 코드 조각을 사용하여 이를 수행했습니다(저는 jQuery도 사용하고 있으므로 $() 함수를 사용합니다).

$("#thediv").scrollTop = $("#thediv").scrollHeight;

그러나 그것은 나에게 일관되지 않은 결과를 제공했습니다.때로는 작동하고 때로는 작동하지 않으며 사용자가 div의 크기를 조정하거나 스크롤 막대를 수동으로 이동하면 작동이 완전히 중단됩니다.

대상 브라우저는 Firefox 3이며 통제된 환경에 배포되므로 IE에서 전혀 작동할 필요가 없습니다.

어떤 아이디어라도 있나요?이것이 나를 당황하게 만들었습니다.감사해요!

도움이 되었습니까?

해결책

scrollHeight 콘텐츠의 전체 높이여야 합니다. scrollTop 요소의 클라이언트 영역 상단에 표시될 콘텐츠에 대한 픽셀 오프셋을 지정합니다.

그래서 당신은 정말로 원합니다 (여전히 jQuery를 사용하고 있습니다):

$("#thediv").each( function() 
{
   // certain browsers have a bug such that scrollHeight is too small
   // when content does not fill the client area of the element
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;
});

...스크롤 오프셋을 마지막으로 설정합니다. clientHeight 콘텐츠의 가치.

다른 팁

scrollIntoView

그만큼 스크롤IntoView 메소드는 요소를 보기로 스크롤합니다.

루프를 사용하여 한 요소의 jQuery를 반복하는 것은 매우 비효율적입니다.ID를 선택할 때 get() 또는 [] 표기법을 사용하여 jQuery의 첫 번째 고유 요소를 검색할 수 있습니다.

var div = $("#thediv")[0];

// certain browsers have a bug such that scrollHeight is too small
// when content does not fill the client area of the element
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight);
div.scrollTop = scrollHeight - div.clientHeight;

$("#thediv").scrollTop($("#thediv")[0].scrollHeight);

일반 JS에서도 가능합니다.요령은 scrollTop을 요소의 전체 높이보다 크거나 같은 값으로 설정하는 것입니다(scrollHeight):

const theDiv = document.querySelector('#thediv');
theDiv.scrollTop = Math.pow(10, 10);

에서 MDN:

요소에 사용 가능한 최대 값보다 큰 값으로 설정되면 스크롤 탑은 최대 값으로 자체적으로 설정됩니다.

반면에 Math.pow(10, 10) 다음과 같이 너무 높은 값을 사용하여 트릭을 수행했습니다. Infintiy 또는 Number.MAX_VALUE scrollTop을 다음으로 재설정합니다. 0 (파이어폭스 66).

왼쪽에 떠 있고 내용의 크기가 조정되는 3개의 div를 래핑하는 div가 있었습니다.이 문제를 해결하려고 할 때 div 래퍼에 대해 펑키한 색상의 테두리/배경을 켜는 것이 도움이 됩니다.문제는 크기가 조정된 div 콘텐츠가 div 래퍼 외부로 넘치고 래퍼 아래 콘텐츠 영역 아래로 흘러나온다는 것입니다.

위의 @ Shog9의 답변을 사용하여 해결되었습니다.내 상황에 적용하면 다음과 같은 HTML 레이아웃이 됩니다.

<div id="div-wrapper">
  <div class="left-div"></div>
  <div id="div-content" class="middle-div">
  Some short/sweet content that will be elongated by Jquery.
  </div>
  <div class="right-div"></div>
</div>

이것은 div-wrapper의 크기를 조정하는 jQuery입니다.

<script>
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content");
//now I need to resize the div...
var contentHeight = $('#div-content').prop('scrollHeight')
$("#div-wrapper").height(contentHeight);
</script>

참고로 $('#div-content').prop('scrollHeight') 는 래퍼의 크기를 조정해야 하는 높이를 생성합니다.또한 실제 jQuery 함수로 scrollHeight를 얻는 다른 방법도 알지 못합니다.$('#div-content').scrollTop() 및 $('#div-content').height 중 어느 것도 실제 콘텐츠 높이 값을 생성하지 않습니다.이것이 누군가에게 도움이 되기를 바랍니다!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top