사업부의 하단으로 스크롤?

레일에서 아약스 요청을 사용하여 채팅을 만들고 있으며 많은 운없이 div를 맨 아래로 스크롤하려고합니다.

이 div의 모든 것을 감싸고 있습니다.

#scroll {
    height:400px;
    overflow:scroll;
}

JS를 사용하여 기본적으로 맨 아래로 스크롤하는 방법이 있습니까?

아약스 요청 후 맨 아래로 스크롤하는 방법이 있습니까?

내 사이트에서 사용하는 내용은 다음과 같습니다.

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

jQuery scrollTop을 사용하는 경우 훨씬 쉽습니다 .

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

다음 코드를 사용할 수 있습니다 :

function scrollToBottom (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

JQuery 로 부드러운 스크롤 을 수행하려면

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

JSFiddle 의 예 를 참조하십시오

이것이 작동하는 이유는 다음과 같습니다.

참조 : scrollTop , scrollHeight , clientHeight

사용 의 jQuery 애니메이션을 :

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

jQuery 1.6에서 작동

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

모든 최신 브라우저 에서 작동하는 최신 방법 :

this.scrollIntoView(false);

자바 스크립트로 부드러운 스크롤 :

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

에 의존하지 않으려면 scrollHeight다음 코드가 도움이됩니다.

$('#scroll').scrollTop(1000000);

jQuery를 사용하여 scrollTop 은 주어진 요소에 대한 scollbar의 세로 위치를 설정하는 데 사용됩니다. 애니메이션과 다른 옵션 ( 데모 ) 으로 스크롤하는 데 사용되는 멋진 jquery scrollTo 플러그인이 있습니다.

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

아래로 스크롤하면서 jQuery의 애니메이션 메소드 를 사용 하여 애니메이션 을 추가하려면 다음 스 니펫을 확인하십시오.

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);

같은 문제가 발생했지만 추가 제약이 있습니다. 스크롤 컨테이너에 새 요소를 추가하는 코드를 제어 할 수 없었습니다. 내가 찾은 예 중 어느 것도 나를 그렇게 할 수 없었습니다. 내가 끝내는 해결책은 다음과 같습니다.

그것은 사용 Mutation Observers( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) (polyfills가 존재하지만)은 최신 브라우저에서 사용할 수있는 수

따라서 기본적으로 코드는 다음을 수행합니다.

var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

나는 개념을 보여주기 위해 바이올린을 만들었습니다 : https://jsfiddle.net/j17r4bnk/

자바 스크립트 또는 jquery :

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

CSS :

 .messages
 {
      height: 100%;
      overflow: auto;
  }

이것이 정말로 도움이된다는 것을 알게되었습니다. 감사합니다.

Angular 1.X 사람들을 위해 :

angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

jQuery 요소와 HTML DOM 요소의 줄 바꿈이 각도와 약간 혼동되기 때문입니다.

또한 채팅 응용 프로그램의 경우 유용한 채팅이로드 된 후이 할당을 수행하면 짧은 시간 초과시에도 시간을 두어야 할 수도 있습니다.

작은 부록 : 마지막 줄이 이미 보이는 경우에만 스크롤됩니다. 조금만 스크롤하면 내용을 그대로 둡니다 (주의 : 다른 글꼴 크기로 테스트되지 않았습니다. "> = 비교"내에서 약간의 조정이 필요할 수 있습니다) :

var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);                   

// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;

보너스 스 니펫과 같습니다. 나는 각도를 사용하고 있으며 사용자가 사용자와 다른 대화를 선택할 때 메시지 스레드를 맨 아래로 스크롤하려고했습니다. 메시지에 대한 ng-repeat를 사용하여 새 데이터가 div에로드 된 후 스크롤이 작동하는지 확인하려면 스크롤 스 니펫을 시간 초과로 래핑하십시오.

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

그러면 데이터가 DOM에 삽입 된 후 scroll 이벤트가 시작됩니다.

jQuery를 사용하여 html,body다음을 통해 문서에 애니메이션을 첨부 할 수도 있습니다 .

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

id가 "div-id"인 div의 상단으로 부드럽게 스크롤됩니다.

자바 스크립트 :

document.getElementById('messages').scrollIntoView(false);

존재하는 내용의 마지막 줄로 스크롤합니다.

문서 높이와 관련하여 아래로 스크롤 할 수 있습니다.

$('html, body').animate({scrollTop:$(document).height()}, 1000);

이것에 대한 매우 간단한 방법 scroll to은 div의 높이 로 설정하는 것입니다.

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

div 내부의 마지막 요소로 스크롤하십시오.

myDiv.scrollTop = myDiv.lastChild.offsetTop

내 Angular 6 응용 프로그램에서 방금 다음을 수행했습니다.

postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}

clearInterval (interval) 기능은 수동 스크롤 상단 / 하단을 허용하도록 타이머를 중지합니다.

내 시나리오 : 사용자가 제공 한 문자열을 추가하고 목록의 끝으로 자동 스크롤 해야하는 문자열 목록이있었습니다. 목록의 표시 높이를 고정한 후 오버플로해야합니다.

@Jeremy Ruten의 답변을 시도했지만 효과가 있었지만 (n-1) 번째 요소로 스크롤되었습니다. 이 유형의 문제에 직면 한 사람이 있으면 setTimeOut()방법 해결 방법을 사용할 수 있습니다 . 아래 코드를 수정해야합니다.

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

여기 내가 만든 StcakBlitz 링크는 문제와 그 해결책을 보여줍니다 : https://stackblitz.com/edit/angular-ivy-x9esw8

나는 이것이 오래된 질문이라는 것을 알고 있지만 이러한 해결책 중 어느 것도 나를 위해 일하지 않았다. 원하는 결과를 얻기 위해 offset (). top을 사용했습니다. 채팅 애플리케이션의 마지막 메시지까지 화면 을 부드럽게 스크롤하는 데 사용한 내용은 다음과 같습니다 .

$("#html, body").stop().animate({
     scrollTop: $("#last-message").offset().top
}, 2000);

나는 이것이 다른 누군가를 돕기를 바랍니다.

때로는 가장 간단한 것이 가장 좋은 해결책입니다. 이것이 도움이 될지 모르겠습니다. "y ="가 높을수록 스크롤이 내려 가고 "0"은 맨 위를 의미하므로 예를 들어 "1000"은 맨 아래 또는 "2000"또는 "3000"등이 될 수 있습니다. 페이지입니다. 이것은 일반적으로 onclick 또는 onmouseover가있는 버튼에서 작동합니다.

window.scrollTo(x=0,y=150);

스크롤 가능한 요소의 상단과의 거리를 요소의 총 높이로 설정하십시오.

const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight

다음과 같이 HTML DOM scrollIntoView 메소드를 사용할 수 있습니다.

var element = document.getElementById("scroll");
element.scrollIntoView();

사용하다 :

var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);

또는 아래로 스크롤을 확인하십시오.

    var element = $(element);
    var maxScrollTop = element[0].scrollHeight - element.outerHeight();
    element.on('scroll', function() {
        if ( element.scrollTop() >= maxScrollTop ) {
            alert('scroll to bottom');
        }
    });

채팅 창 하단으로 스크롤하기 위해이 작업을 수행 한 경우 다음을 수행하십시오.

채팅에서 특정 div로 스크롤하는 아이디어는 다음과 같습니다.

1) Person, time 및 message로 구성된 각 채팅 div는 chatContentbox 클래스의 for 루프에서 실행됩니다.

2) querySelectorAll은 이러한 모든 배열을 찾습니다. 400 개의 노드 (400 개의 채팅) 일 수 있습니다.

3) 마지막으로 이동

4) scrollIntoView ()

let lastChatBox = document.querySelectorAll('.chatContentBox'); 
lastChatBox = lastChatBox[lastChatBox.length-1]; 
lastChatBox.scrollIntoView();