除非用户向上滚动，否则将溢出 div 滚动到底部 [英] Keep overflow div scrolled to bottom unless user scrolls up

问题描述

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

I have a div that is only 300 pixels big and I want it to when the page loads scroll to the bottom of the content. This div has content dynamically added to it and needs to stay scrolled all the way down. Now if the user decides to scroll up I don't want it to jump back to the bottom until the user scrolls all the way down again

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

Is it possible to have a div that will stay scrolled to the bottom unless the user scrolls up and when the user scrolls back to the bottom it needs to keep itself at the bottom even when new dynamic content is added. How would I go bout creating this.

推荐答案

这可能对您有所帮助:

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

，匹配评论...

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

每当添加内容时，调用函数updateScroll()，或者设置一个定时器:

whenever content is added, call the function updateScroll(), or set a timer:

//once a second
setInterval(updateScroll,1000);

如果您只想在用户未移动时更新:

if you want to update ONLY if the user didn't move:

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});

这篇关于除非用户向上滚动，否则将溢出 div 滚动到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！