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

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

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

当前回答

$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;

这将使用$(document).height()属性从#yourDivID的高度计算滚动顶部位置，这样即使在div中添加了动态内容，滚动条也将始终位于底部位置。希望这能有所帮助。但它也有一个小错误，即使我们向上滚动并将鼠标指针从滚动条上保留下来，它也会自动回到底部位置。如果有人能纠正这一点，那就太好了。

2015-02-15 11:32:23

其他回答

我发现最友好的解决方案是将滚动-快照-对齐方法与少量Javascript结合起来。前一种解决方案本身的问题是，抓拍太强了，你必须滚动很远才能摆脱它。

相反，我们可以在容器滚动到底部时使用捕捉动态，然后在用户向上滚动超过某个阈值时禁用它。

这个解决方案还有一个额外的好处，那就是它是一个渐进的增强:如果用户禁用了Javascript，它就会退回到只使用css的方法。

2022-06-30 16:47:21

我试着用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");
window.scrollTo(0,element.offsetHeight);

2019-11-27 08:46:38

这可能对你有帮助:

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

基于吉姆霍尔斯的解决方案和意见。https://stackoverflow.com/a/44051405/9208887。

我额外添加了一个flex 1 1 0%的元素，以确保文本在容器未满时从顶部开始。

// just to add some numbers, so we can see the effect // the actual solution requires no javascript let num = 1001; const container = document.getElementById("scroll-container"); document.getElementById("adder").onclick = () => container.append( Object.assign(document.createElement("div"), { textContent: num++ }) ); .scroll-wrapper { height: 100px; overflow: auto; display: flex; flex-direction: column-reverse; border: 1px solid black; } .scroll-start-at-top { flex: 1 1 0%; } <div class="scroll-wrapper"> <span class="scroll-start-at-top"></span> <div id="scroll-container"> <div>1000</div> </div> </div> <button id="adder">Add Text</button>

2022-01-23 22:24:13

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

推荐文章

最新文章

标签