我需要将页面滚动到底部直到用户向上滚动

Question

好的，这是我的情况：

我一直在为 side-project/hobby 开发聊天室类型的网站。当前布局使用 html 帧。底部框架是 "footer" 或 "message input" 框架。顶部框架是显示 public 消息的地方。我使用 ajax 每秒更新顶帧。它工作正常。我的问题是：

我需要能够保持顶部框架一直滚动到底部 -- 例如，除非用户向上滚动以查看旧消息。我目前有一个让它向下滚动到底部的功能，但是每次 ajax 更新页面时，它都会强制它回到底部，所以我不能向上滚动超过一秒钟，这真的很令人沮丧。我已经搜索了一个解决方案，但我没有找到任何真正适合我的解决方案。我使用的滚动到底部的函数如下：

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height());
}

它完成了它的工作，但同样，如果用户向上滚动以查看旧消息，我需要它停止强制页面到底部。

更新--

我应该澄清一下，我使用的是实际框架，而不是 iframe。我的 "index" 页面代码是：

<FRAMESET ROWS="*,90">
<FRAME SRC="header.php" name="display" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="NO">
<FRAME SRC="footer.php" name="message" SCROLLING="no" BORDERCOLOR="00FF00" MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>

刷新聊天消息的代码是：

<script id="source" language="javascript" type="text/javascript">
  function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height());
}


    $(function() {
    startRefresh();
});

function startRefresh() {
    setTimeout(startRefresh,1000);
  $.ajax({                                      
      url: 'api.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {

        //--------------------------------------------------------------------
        // 3) Update html content
        //--------------------------------------------------------------------

        $('#output').html(data); //Set output element html   
           jumpToPageBottom();

      } 
    });
  }; 

  </script>

这样的刷新是不是一种糟糕的做法？ div 的更新方式是否导致了我的一些问题？我对所有这一切都是陌生的（显然）——所以任何建议都将不胜感激。

Answer 1

你需要的基本逻辑是：

var wasAtBottom = isAtBottom();

$('#output').html(data);

if (wasAtBottom) {
    jumpToPageBottom();
}

isAtBottom 来自 this answer:

function isAtBottom() {
    return $(window).scrollTop() + $(window).height() === $(document).height();
}

这是一个适合您的工作演示：http://jsfiddle.net/9q17euuo/2/

我需要将页面滚动到底部直到用户向上滚动

I need to keep a page scrolled to the bottom UNTIL the user scrolls back up

javascript

css

ajax

jquery

scroll