JavaScript를 사용한 오버플로 DIV 스크롤

JavaScript를 사용한 오버플로 DIV 스크롤

크기를 조정하고 페이지를 드래그할 때 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

scrollIntoView 메서드는 요소를 뷰로 스크롤합니다.

루프를 사용하여 한 요소의 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는 JS에 있습니다.은 요소의더 큰 값('')으로 scrollTop을 입니다.scrollHeight

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

MDN에서:

요소에 사용할 수 있는 최대값보다 큰 값으로 설정된 경우 scrollTop은 최대값으로 자리를 잡습니다.

편,의은,Math.pow(10, 10)너무 높은 값을 사용하여 트릭을 수행했습니다.Number.MAX_VALUE을 리셋합니다.0(Firefox 66)

나는 3개의 div를 포장하고 있었는데, 그것은 떠다니고 있었고, 그 내용물은 크기가 조정되고 있었다.이 문제를 해결하려고 할 때 div-wrapper의 펑키한 색상의 테두리/배경을 켜는 데 도움이 됩니다.문제는 크기 조정된 div 내용물이 div-wrapper 바깥쪽에 넘쳐나면서 (랩퍼 아래 내용물 영역까지 블리딩되었습니다)

위의 @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 크기를 조정하기 위한 my 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('scroll Height')는 래퍼의 크기를 변경해야 하는 높이를 생성합니다.또한 실제 jQuery 함수의 scrollHeight를 얻을 수 있는 다른 방법은 없습니다.$('#div-content').scrollTop() 및 $('#div-content') 중 어느 것도 없습니다.height를 지정하면 실제 콘텐츠 높이 값이 생성됩니다.이게 도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/13362/scrolling-overflowed-divs-with-javascript