I need to keep a page scrolled to the bottom UNTIL

问题:

Ok, here's my situation:

I've been working on a chatroom type website for a side-project/hobby. The current layout uses html frames. The bottom frame is the "footer", or "message input" frame. The top frame is where the public messages are displayed. I use ajax to update the top frame every second. It works fine. My issue is this:

I need to be able to keep the top frame scrolled all the way to the bottom -- UNLESS the user scrolls back up to view old messages, for example. I currently have a function that keeps it scrolled down to the bottom, but every time ajax updates the page, it forces it back down to the bottom, so I can't scroll back up for more than about a second, and it's really frustrating. I have searched for a solution, but i've not found any that actually work for me. The function that I use to scroll to the bottom is as follows:

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

It does it's job, but again, I need it to stop forcing the page to the bottom if a user scrolls back up to view older messages.

UPDATE --

I should clarify, I'm using actual frames, rather than an iframe. My "index" page code is:

<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>

And the code that refreshes my chat messages is:

<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>

Is the refreshing like that just a bad approach? Is the way that the div is updated causing some of my issues? I'm new to all of this (obviously) -- so any advice would be much appreciated.

回答1:

The basic logic you need is:

var wasAtBottom = isAtBottom();

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

if (wasAtBottom) {
    jumpToPageBottom();
}

With isAtBottom being from this answer:

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

Here's a working demo for you: http://jsfiddle.net/9q17euuo/2/