javascript - 设置 div 的焦点底部并允许向后滚动

Question

我目前正在使用此代码，但它不允许向后滚动，我试图找到一种方法来保持在 DIV 的底部，无论发生多少次刷新，但也允许用户向后滚动通过 div 即使发生刷新，我也找不到任何解决方法，我能做的最好的就是这个片段，除了允许用户回滚 DIV 之外，它可以做所有事情，有人有什么建议吗？

<script>
$(document).ready(function() {
  setInterval(
    function() {
        $("#DLMessageList").show("slow").load("query.php?qid=11");
        $("#mainPane").scrollTop(10000);
    }, 
  2000);
});
</script>

<div id="mainPane">
    <dl id="DLMessageList">
        <dd><span>&lt;core&gt;&nbsp;</span>asdasdasdasd</dd>
        <dt>[13:46:38]&nbsp;</dt>
        <dd><span>&lt;core&gt;&nbsp;</span>dfgsdfg</dd>
        <dt>[13:46:41]&nbsp;</dt>
        <dd><span>&lt;core&gt;&nbsp;</span>fgdfg</dd>
        <dt>[13:46:48]&nbsp;</dt>
        <dd><span>&lt;core&gt;&nbsp;</span>test</dd>
    </div>
</div>

中可能有数百行，DLMessageList但高度mainPane仅为 300 像素。

Answer 1

您需要检查是否希望在刷新后滚动位置保持在底部。就在您调用 ajax 之前，检查 div 是否一直向下滚动。如果是，那么我们希望在刷新后也向下滚动 div。如果不是，那么用户已经在 div 内滚动并且您没有更改滚动位置。

注意：未经测试，您可能需要div从 scrollHeight 值中减去您的高度，不确定它返回什么。

$(document).ready(function() {
  var sticky = true;
  setInterval(
    function() {
        sticky = $("#mainPane")[0].scrollTop == $("#mainPane")[0].scrollHeight;
        $("#DLMessageList").show("slow").load("query.php?qid=11", function(){
            if (sticky){
                $("#mainPane")[0].scrollTop = $("#mainPane")[0].scrollHeight;
            }
        });
    }, 
  2000);
});