Question

我有一个可滚动的div，它通过Jquery附加了数据。我试图让它在某些条件下自动滚动到底部。

首次加载数据时（.append），它应滚动到底部。
当div被滚动到底部时，它应该在每个之后保留在div的底部.append
当div不在底部并且在加载（.append）之后它不会滚动。

我发现了许多关于如何在每次加载数据时将div保持在底部的主题，但我还没有发现任何与第三个条件相关的内容。如果有人能指出我正确的方向，将不胜感激。

更新

这就是我现在所拥有的，它的效果很好，但是如果你正在阅读顶部的某些内容，它会让你失望，非常讨厌：

$("#chatroom").scrollTop($("#chatroom")[0].scrollHeight);

如果我能分辨出滚动条的位置，似乎我可以执行if语句并阻止执行，如果滚动条不在底部。

更新＃2

我找到了一个似乎对我不起作用的脚本XD;它似乎适用于其他人。我正努力让它立即发挥作用。测试后，如果你不移动滚动条似乎有效，如果你移动滚动条，那么IF永远不会返回true并且永远不会移动到底部。

function divbottom() {
              var chatroom = document.getElementById (chatroom);
              if (chatroom.offsetHeight + chatroom.scrollTop >= chatroom.scrollHeight) {
                $("#chatroom").scrollTop($("#chatroom")[0].scrollHeight);
              }
            }

Answer 1

解决方案是使用height，scrollTop和scrollHeight属性（正如您在第二次更新中所说的那样）。

但是，请确保在添加内容之前使用这些值：

var height = $("#chatroom").height(), scrollTop = $("#chatroom")[0].scrollTop, scrollHeight = $("#chatroom")[0].scrollHeight; $("#chatroom").html($("#chatroom").html() + content); if(height + scrollTop >= scrollHeight) { divbottom(); }

这是一个有效的script at jsfiddle，可以满足您的需求（在Firefox，Chromium和Opera上测试过）。

Answer 2

要扩展antoyo的答案......我会小心这一行：

$("#chatroom").html($("#chatroom").html() + content);

我最近做了类似的事情。您可以通过这种方式快速崩溃浏览器。我建议改为：

$("#chatroom").append(content);

条件可滚动分区

2 个答案: