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

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

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

当前回答

我设法把它修好了。诀窍是计算:(a)当前div用户滚动位置和(b) div滚动高度，都是在附加新元素之前。

如果a === b，则在追加新元素之前就知道用户位于底部。

    let div = document.querySelector('div.scrollableBox');

    let span = document.createElement('span');
    span.textContent = 'Hello';

    let divCurrentUserScrollPosition = div.scrollTop + div.offsetHeight;
    let divScrollHeight = div.scrollHeight;

    // We have the current scroll positions saved in
    // variables, so now we can append the new element.
    div.append(span);

    
    if ((divScrollHeight === divCurrentUserScrollPosition)) {
        // Scroll to bottom of div
        div.scrollTo({ left: 0, top: div.scrollHeight });
    }

2021-01-24 00:18:09

其他回答

我试着用Bootstrap 5来做同样的事情。我正在编写的页面是一个单窗口html工具，我想要两列具有可滚动内容，其中一列需要反向，因为它是一个日志(另一列不太可能滚动，除非故意这么做)。列表和它们的标题也是底部锚定的，我很难让标题保持在一个灵活的可滚动列表的顶部。

多亏了上面的例子，我才能够找出我所缺少的内容并获得正确的类类型。

下面是完整的例子。在我实际的应用程序中，有其他两个类mh-100 col overflow-auto的第三列，不需要内部行/列，因为没有标题贴在顶部(如果视口太小，它只会正常滚动)。列表有一个ID，我使用它来选择并添加到它们前面或删除顶部元素(这是反向列表中的bottom <li>项)。

这里提供了一个较小的版本:

如果你的视口高度小于整体内容，标题应该位于列表的顶部，而所有内容都位于页面的底部(实际上是视口高度的75%，但在这个例子中，标题并没有占据它设计的空间)。

注:我不是一个真正的web开发人员，只是编写一些方便的基于html的工具来处理日常工作，所以非常欢迎评论。

2022-01-10 17:05:12

这可能对你有帮助:

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

2013-09-04 12:59:42

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

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

2013-09-04 13:00:18

你可以用这样的东西，

var element = document.getElementById("yourDivID");
window.scrollTo(0,element.offsetHeight);

2019-11-27 08:46:38

在2020年，你可以使用css snap，但在Chrome 81之前，布局变化不会触发重新snap，纯css聊天ui在Chrome 81上工作，也可以检查我可以使用css snap。

这个演示将捕捉最后一个元素(如果可见)，滚动到底部查看效果。

.container { overflow-y:滚动; overscroll-behavior-y:包含; 滚动抓拍型:y接近度; ｝ .container > div > div:last child { scroll-snap-align:结束; ｝ .container > div > div { 背景:浅灰色; 高度:3快速眼动; 字体大小:1.5快速眼动; ｝ .container > div > div:n -child(2n) { 背景:灰色; ｝ <div class="container" style="height:6rem"> < div > < div > < / div > 1 2 < div > < / div > < div > 3 < / div > 4 < div > < / div > 5 < div > < / div > < / div > < / div >

EDIT

使用scroll-snap类型:y接近度;，向上滚动更容易。

2020-03-05 13:21:41

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

推荐文章

最新文章

标签