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中滚动，并且您不会更改滚动位置。

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

$(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);
});

设置div＆amp;的焦点底部允许滚动回来

1 个答案: