Я зіткнувся з тією ж проблемою, але з додатковим обмеженням: я не мав контролю над кодом, який додав нові елементи до контейнера прокрутки. Жоден із знайдених тут прикладів не дозволив мені зробити саме це. Ось рішення, з яким я закінчився.
Він використовує 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/