Я создаю чат, используя ajax-запросы в rails, и я пытаюсь заставить div прокручиваться к низу без особого успеха.
Я оборачиваю все в этот div:
#scroll {
height:400px;
overflow:scroll;
}
Есть ли способ сохранить его прокрутку к низу по умолчанию с помощью JS?
Есть ли способ сохранить прокрутку в самый низ после ajax-запроса?
Вот что я использую на своем сайте:
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
Это гораздо проще, если вы используете jQuery scrollTop:
$("#mydiv").scrollTop($("#mydiv")[0].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);
}
См пример на [JSFiddle][1]
И что's, как она работает:
[][1]
Реф: scrollTop, scrollHeight, clientHeight
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));
Работы с jQuery 1.6
Если вы Don'т хотите, чтобы полагаться на 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);
JavaScript или jQuery:
var scroll = document.getElementById('messages');
scroll.scrollTop = scroll.scrollHeight;
scroll.animate({scrollTop: scroll.scrollHeight});
Усс:
.messages
{
height: 100%;
overflow: auto;
}
Нашел это действительно полезно, спасибо.
Для угловой 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-элементы дом становится немного запутанным с углового.
Также для чат приложение, я обнаружил, что делает это задание после того, как чаты были загружены, чтобы быть полезным, вам также может понадобиться, чтобы ударить на коротких тайм-аут, а также.
Просто в качестве бонуса фрагмент. Я'м, используя угловые и пытался прокрутить сообщение-нить на дно, когда пользователь выбрал другой беседы с пользователями. Для того, чтобы убедиться, что свиток работает после того, как новые данные были загружены в DIV с НГ-повтор сообщения, просто оберните выделите фрагмент на тайм-аут.
$timeout(function(){
var messageThread = document.getElementById('message-thread-div-id');
messageThread.scrollTop = messageThread.scrollHeight;
},0)
Что будет убедиться, что событие Scroll уволен после того, как данные были вставлены в дом.
небольшое добавление: свитки только, если последняя строка уже видна. если прокручивается чуть-чуть, листья контент, где он находится (внимание: не тестировалась с разными размерами шрифта. это может понадобиться некоторые корректировки внутри " и>= сравнение с"):
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;
Вы можете также, используя jQuery, прикрепить анимацию в HTML-тело документа через:
$("в формате HTML,тело и").анимировать({scrollTop:$(" и#див-код и")[0].offsetTop}, 1000);
что приведет к плавной прокрутки к верхней части элемента div с id "и див-код и".
Я столкнулся с той же проблемой, но с дополнительным ограничением: я не могу контролировать код, который добавляется новые элементы в контейнер прокрутки. Ни один из примеров я нашел здесь позволило мне сделать это. Вот решение, я в конечном итоге с .
Он использует мутации наблюдателей
(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});
Я сделал скрипку, чтобы продемонстрировать концепцию :
Java-Скрипт:
документ.метода getElementById('сообщения').scrollIntoView(ложь);`
Переход к последней строке содержания.
Очень простой способ это установить свиток
высота нсум.
var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);
Я знаю, это старый вопрос, но ни одно из этих решений работал для меня. Я закончил с использованием смещения().сверху, чтобы получить желаемые результаты. Здесь's то, что я использовал, чтобы нежно прокрутите экран вниз на последнее сообщение в мой чат-приложение:
$("#html, body").stop().animate({
scrollTop: $("#last-message").offset().top
}, 2000);
Я надеюсь, что это помогает кто-то другой.