保持溢出 div 滚动到底部，除非用户向上滚动

javascript jquery html css scroll

2022-08-29 23:44:14

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

是否有可能有一个div将保持滚动到底部，除非用户向上滚动并且当用户滚动回底部时，即使添加了新的动态内容，它也需要将自己保持在底部。我该如何去创造这个。

答案 1

我只能用CSS来解决这个问题。

诀窍是使用和display: flex;flex-direction: column-reverse;

浏览器将底部视为顶部。假设您目标浏览器支持，唯一需要注意的是标记必须按相反的顺序排列。flex-box

下面是一个工作示例。https://codepen.io/jimbol/pen/YVJzBg

答案 2

这可能会对您有所帮助：

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;
});