Прокрутка до нижней части div?
Я создаю чат с помощью ajax-запросов в rails, и я пытаюсь получить div для прокрутки вниз без особого успеха.
я оборачиваю все в этот div:
#scroll {
height:400px;
overflow:scroll;
}
есть ли способ прокрутить его вниз по умолчанию с помощью JS?
есть ли способ прокрутить его вниз после запроса ajax?
18 ответов
вот что я использую на моем сайте:
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
С помощью jQuery animate:
$('#DebugContainer').stop().animate({
scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);
Вы можете использовать следующий код:
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);
}
посмотреть пример on JSFiddle
и вот как это работает:
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
работает от jQuery 1.6
Если вы не хотите полагаться на 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);
нашел это очень полезным, спасибо.
для углового 1.Х людей:
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 немного запутывается с angular.
также для приложения чата я обнаружил, что это назначение после загрузки ваших чатов будет полезно,вам также может потребоваться короткий тайм-аут.
небольшое добавление: прокручивается только, если последняя строка уже видна. если прокрутить немного, оставляет содержимое там, где оно есть (внимание: не тестируется с разными размерами шрифта. это может потребовать некоторых корректировок внутри "> = сравнение"):
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;
просто как бонусный фрагмент. Я использую angular и пытался прокрутить поток сообщений вниз, когда пользователь выбрал разные разговоры с пользователями. Чтобы убедиться, что прокрутка работает после того, как новые данные были загружены в div с ng-repeat для сообщений, просто оберните фрагмент прокрутки в тайм-аут.
$timeout(function(){
var messageThread = document.getElementById('message-thread-div-id');
messageThread.scrollTop = messageThread.scrollHeight;
},0)
Это гарантирует, что событие прокрутки запускается после того, как данные были вставлены в DOM.
Javascript или jquery:
var scroll = document.getElementById('messages');
scroll.scrollTop = scroll.scrollHeight;
scroll.animate({scrollTop: scroll.scrollHeight});
Css:
.messages
{
height: 100%;
overflow: auto;
}
Это позволит вам прокручивать весь путь вниз по отношению к высоте документа
$('html, body').animate({scrollTop:$(document).height()}, 1000);
вы также можете, используя jQuery, прикрепить анимацию к html,body
документ через:
$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);
что приведет к плавной прокрутке до верхней части div с идентификатором "div-id".
я столкнулся с той же проблемой, но с дополнительным ограничением: у меня не было контроля над кодом, который добавлял новые элементы в контейнер прокрутки. Ни один из примеров, которые я нашел здесь, не позволил мне сделать именно это. Вот решение, которое я нашел .
Он использует 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/
Java Script:
document.getElementById('messages').scrollIntoView(false);
прокрутка до последней строки содержимого.
очень простой метод для этого-установить scroll to
на высоту div.
var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);
Я знаю, это старый вопрос, но ни одно из этих решений работал для меня. В итоге я использовал offset ().топ для получения желаемых результатов. Вот что я привык нежно прокрутите экран вниз до последнего сообщения в моем приложении чата:
$("#html, body").stop().animate({
scrollTop: $("#last-message").offset().top
}, 2000);
Я надеюсь, что это поможет кому-то еще.