我需要保持页面滚动到底部，直到用户向后滚动 [英] I need to keep a page scrolled to the bottom UNTIL the user scrolls back up

问题描述

好，这是我的情况:

我一直在一个聊天室类型的网站上从事副项目/爱好.当前布局使用html框架.底部框架是页脚"或消息输入"框架.顶部框是显示公共消息的位置.我使用ajax每秒更新一次顶部框架.它工作正常.我的问题是这样的:

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:

我需要使顶部框架一直滚动到底部-除非用户向上滚动以查看旧消息，否则.我目前有一个功能，可以将其向下滚动到底部，但是每次ajax更新页面时，它都会强制将其向下滚动到底部，因此我不能向上滚动超过一秒钟，这确实令人沮丧.我在寻找解决方案，但没有找到对我真正有用的解决方案.我用来滚动到底部的功能如下:

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.

更新-

我应该澄清一下，我使用的是实际框架，而不是iframe.我的索引"页面代码是:

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>

像这样的刷新只是一种不好的方法吗? div的更新方式是否会引起我的一些问题?我是所有这些的新手(很显然)，因此任何建议都将不胜感激.

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.

推荐答案

您需要的基本逻辑是:

var wasAtBottom = isAtBottom();

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

if (wasAtBottom) {
    jumpToPageBottom();
}

isAtBottom来自此答案:

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

这是为您工作的演示: http://jsfiddle.net/9q17euuo/2/

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

这篇关于我需要保持页面滚动到底部，直到用户向后滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！