Прокрутите в конец div?

Ответ 1

Вот то, что я использую на своем сайте:

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

Ответ 2

Это намного проще, если вы используете jQuery scrollTop:

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

Ответ 3

используя jQuery aimate:

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

Ответ 4

Вы можете использовать следующий код:

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

Ответ 5

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

Работает с JQuery 1.6

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

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

Ответ 6

Более новый метод, который работает во всех текущих браузерах:

this.scrollIntoView(false);

Ответ 7

Если вы не хотите полагаться на scrollHeight, следующий код помогает:

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

Ответ 8

плавная прокрутка с помощью Javascript:

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

Ответ 9

С помощью jQuery scrollTop используется для установки вертикальной позиции scollbar для любого заданного элемента. есть также jquery scrollTo plugin, используемый для прокрутки с анимацией и различными опциями (demos)

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

если вы хотите использовать метод анимации jQuery для добавления анимации при прокрутке вниз, проверьте следующий фрагмент:

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

Ответ 10

Нашли это очень полезно, спасибо.

Для людей с угловым 1.X:

  angular.module('myApp'). controller ('myController', ['$ scope', '$ document' функция ($ scope, $document) {
   var overflowScrollElement = $document [0].getElementById('your_overflow_scroll_div');   overflowScrollElement [0].scrollTop = overflowScrollElement [0].scrollHeight;
 }
]);
Код>

Просто потому, что обтекание элементов jQuery и HTML DOM немного запутывается с угловыми.

Также для приложения чата я нашел выполнение этого задания после того, как ваши чаты были загружены, чтобы быть полезными, вам также может понадобиться пощелкать и короткий тайм-аут.

Ответ 11

Javascript или jquery:

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

Css:

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

Ответ 12

небольшое добавление: прокручивается только, если последняя строка уже видна. если прокручивать крошечный бит, оставляет содержимое там, где оно (внимание: не тестировалось с разными размерами шрифта, возможно, некоторые корректировки внутри " >= сравнение" ):

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;

Ответ 13

Как бонусный фрагмент. Я использую angular и пытался прокрутить поток сообщений до низа, когда пользователь выбрал разные разговоры с пользователями. Чтобы убедиться, что прокрутка работает после того, как новые данные были загружены в div с помощью сообщений ng-repeat для сообщений, просто заверните фрагмент прокрутки в тайм-аут.

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

Это позволит убедиться, что событие прокрутки запускается после того, как данные были вставлены в DOM.

Ответ 14

Вы также можете, используя jQuery, прикрепить анимацию к html,body документа с помощью:

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

что приведет к плавной прокрутке вверху div с id "div-id".

Ответ 15

Это позволит вам прокрутить весь путь вниз относительно высоты документа

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

Ответ 16

Я столкнулся с той же проблемой, но с дополнительным ограничением: у меня не было контроля над кодом, который добавлял новые элементы в контейнер прокрутки. Ни один из примеров, которые я нашел здесь, не позволил мне сделать именно это. Вот решение, в котором я закончил.

Он использует Mutation Observers (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver), что делает его пригодным для использования только в современных браузерах (хотя существуют полисы)

Так что в основном код делает именно это:

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/

Ответ 17

Java Script:

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

Прокрутка до последней строки содержимого.

Ответ 18

Очень простой метод заключается в том, чтобы установить scroll to на высоту div.

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

Ответ 19

Прокрутите до последнего элемента внутри div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Ответ 20

Я знаю, что это старый вопрос, но ни одно из этих решений не разработано для меня. Я закончил использовать offset(). Top, чтобы получить желаемые результаты. Вот что я привык мягко прокрутить экран вниз до последнего сообщения в приложении чата:

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

Я надеюсь, что это поможет кому-то другому.

Ответ 21

Вы можете сделать следующее:

$('button').click(function(){
    $('.logs').animate({scrollTop:$(".logs")[0].scrollHeight}, 500, 'swing');
});

.logs {
  max-height: 100px;
  overflow-y: scroll;
  font-size: larger;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button</button>

<div id="logs" class="logs" style="margin-top: 25px;">
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p><p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p><p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>
<p>blalblalfosd</p>


                        </div>

Ответ 22

Чистый ответ Javascript на очень старый вопрос:

function scrollToElement(id) {
  let ele = document.getElementById(id);
  ele.scrollIntoView({behavior: "smooth"});
}

Передайте id нового элемента в функцию и вуаля.

Ответ 23

Вы можете попробовать это решение:

function setFocusOnDivWithId(elementId) {
   const scrollIntoViewOptions = { behavior: "smooth", block: "center" };
   document.getElementById(elementId).scrollIntoView(scrollIntoViewOptions);
};
setFocusOnDivWithId(elementIdTobeFocused);

Я надеюсь, что это работает для вас!

Ответ 24

использовать:

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');
        }
    });

Ответ 25

Если это делается для прокрутки до нижней части окна чата, выполните следующие действия:

Идея прокрутки до определенного div в чате была следующей

1) Каждый div чата, состоящий из Person, времени и сообщения, запускается в цикле for с классом chatContentbox

2) querySelectorAll находит все такие массивы. Это может быть 400 узлов (400 чатов)

3) перейти к последнему

4) scrollIntoView()

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