我有一个可滚动的div,它通过Jquery附加了数据。我试图让它在某些条件下自动滚动到底部。
我发现了许多关于如何在每次加载数据时将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);
}
}
答案 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);