除非用户向上滚动，否则请将溢出div滚动到底部
我有一个只有300像素大的div，我希望当页面加载滚动到内容的底部。 这个div有动态添加的内容，需要一直保持滚动状态。 现在，如果用户决定向上滚动，我不希望它跳回到底部，直到用户再次一直向下滚动
是否有可能有一个div将保持滚动到底部，除非用户向上滚动，当用户滚动到底部时，即使添加了新的动态内容，它也需要保持在底部。 我将如何去创造这个。
好吧，虽然这可能会帮助你：
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高度或以另一种方式表示元素的实际高度。 这两种方法都没有返回的高度margin ，所以你不必担心。 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
链接地址: http://www.djcxy.com/p/83845.html上一篇: Keep overflow div scrolled to bottom unless user scrolls up