保持溢出div滚动到底部，除非用户向上滚动
我有一个只有300像素大的div，我希望当页面加载滚动到内容的底部。 这个div有dynamic添加到它的内容，需要保持滚动一路下降。 现在，如果用户决定向上滚动，我不希望它跳回到底部，直到用户再次一路滚动
有没有可能有一个div将保持滚动到底部，除非用户向上滚动，当用户滚动到底部时，即使添加了新的dynamic内容，它也需要保持在底部。 我将如何去创造这个。
以及这可能会帮助你：
var element = document.getElementById("yourDivID"); element.scrollTop = element.scrollHeight;
[编辑]，以匹配评论…
function updateScroll(){ var element = document.getElementById("yourDivID"); element.scrollTop = element.scrollHeight; }
每当添加内容时，调用函数updateScroll（），或设置一个计时器：
//once a second setInterval(updateScroll,1000);
如果只想在用户没有移动时更新：
var scrolled = false; function updateScroll(){ if(!scrolled){ var element = document.getElementById("yourDivID"); element.scrollTop = element.scrollHeight; } } $("#yourDivID").on('scroll', function(){ scrolled=true; });
我刚刚实现了这一点，也许你可以使用我的方法。
假设我们有以下HTML：
<div id="out" style="overflow:auto"></div>
然后我们可以检查它是否滚动到底部：
var out = document.getElementById("out"); // allow 1px inaccuracy by adding 1 var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
scrollHeight给你的元素的高度，包括由于溢出的任何不可见区域。 clientHeight为您提供CSS高度，或者以另一种方式表示元素的实际高度。 两种方法都可以返回无边距的高度，所以你不用担心。 scrollTop给你的垂直滚动的位置。 0是顶部，max是元素的scrollHeight减去元素高度本身。 当使用滚动条时，可能会很困难（我在Chrome中）将滚动条一直拖到底部。 所以我扔了1px的不准确。 所以即使滚动条从底部起1px， isScrolledToBottom也是如此。 你可以把它设置成对你来说合适的。
然后，只需将元素的scrollTop设置为底部即可。
if(isScrolledToBottom) out.scrollTop = out.scrollHeight - out.clientHeight;
我为你演示了这个概念： http : //jsfiddle.net/dotnetCarpenter/KpM5j/
我能够得到这只与CSS的工作。
诀窍是使用display: flex; 和flex-direction: column-reverse;
浏览器像顶部一样对待底部。 假设您所定位的浏览器支持flex-box ，唯一需要注意的是标记必须以相反的顺序。
这是一个工作的例子。 https://codepen.io/jimbol/pen/YVJzBg
尝试这个：
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);
生活演示： http : //jsfiddle.net/KGfG2/
$('#div1').scrollTop($('#div1')[0].scrollHeight); Or animated: $("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);
$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow"); return false;
这将使用$(document).height()属性从#yourDivID的高度计算ScrollTop $(document).height()这样即使dynamic内容被添加到div，滚动条总是处于最低位置。 希望这可以帮助。 但是，即使我们向上滚动并将鼠标指针从滚动条中移出，它也会有一个小错误，它会自动到达最低位置。 如果有人能纠正这一点，那也会很好。
//Make sure message list is scrolled to the bottom var container = $('#MessageWindowContent')[0]; var containerHeight = container.clientHeight; var contentHeight = container.scrollHeight; container.scrollTop = contentHeight - containerHeight;
这是我的基于dotnetCarpenter的答案的版本。 我的方法是一个纯粹的jQuery，我命名的variables，使事情更清楚一点..发生的事情是，如果内容高度大于容器，我们滚动额外的距离，以实现预期的结果。
适用于IE和Chrome ..
