我有一个div,只有300像素大,我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容,需要一直向下滚动。现在如果用户决定向上滚动,我不希望它跳回底部,直到用户再次向下滚动

是否有可能有一个div,将保持滚动到底部,除非用户向上滚动,当用户滚动回底部时,它需要保持自己在底部,即使添加了新的动态内容。我该怎么做呢。


当前回答

与Bootstrap 5:

< span style=" font - family:宋体;max-height: 300 px;" > < div > <!——你这里的内容——> < / div > < / div >

其他回答

$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

现场演示:http://jsfiddle.net/KGfG2/

这可能对你有帮助:

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;
});
$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;

这将使用$(document).height()属性从#yourDivID的高度计算滚动顶部位置,这样即使在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和我命名的变量,使事情更清楚一点。发生的情况是,如果内容高度大于容器高度,我们向下滚动额外的距离以实现所需的结果。

工作在IE和chrome..

Jim Hall的答案更可取,因为当你向上滚动时,它确实不会滚动到底部,它也是纯CSS。

然而,非常不幸的是,这不是一个稳定的解决方案:在chrome(可能是由于1像素的问题由dotnetCarpenter上面描述),scrollTop行为不准确的1像素,即使没有用户交互(在元素添加)。你可以设置scrollTop = scrollHeight - clientHeight,但是当另一个元素被添加时,这将保持div的位置,也就是“保持自己在底部”功能不再工作了。

所以,简而言之,添加少量Javascript(唉)将修复这个问题并满足所有要求:

类似于https://codepen.io/anon/pen/pdrLEZ this(示例由Coo),在添加一个元素到列表后,还可以执行以下操作:

container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
    container.scrollTop = container.scrollHeight - container.clientHeight;
}

29是直线的高度。

因此,当用户向上滚动半行时(如果可能的话?),Javascript将忽略它并滚动到底部。但我想这是可以忽略的。而且,它修复了Chrome 1px的东西。