条件可滚动分区

时间:2013-03-19 18:07:11

标签: javascript jquery html scroll

我有一个可滚动的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);
              }
            }

2 个答案:

答案 0 :(得分: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上测试过)。

答案 1 :(得分:0)

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

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

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

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