0

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

  • 首次加载数据（.append）时，它应该滚动到底部。
  • 当 div 滚动到底部时，它应该在每个 .append 之后保持在 div 的底部
  • 当 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);
              }
            }
4

2 回答 2

2

解决方案是使用 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();
}

这是jsfiddle的一个工作脚本，可以满足您的需求（在 Firefox、Chromium 和 Opera 上测试）。

于 2013-03-20T00:33:16.403 回答
0

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

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

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

$("#chatroom").append(content);
于 2014-03-13T18:39:56.433 回答