Question

在人们开始标记为重复之前，这里没有任何答案可行！

poll函数是一个php文件，只是获取文本文件的内容，我希望浏览器在请求（每3秒触发一次）完成后滚动到div内容的底部。这是一些代码

  <div id="content_div_id">

 </div>

<script>
$(function() {
  startRefresh();    
    });
    function startRefresh() {
        setTimeout(startRefresh,3000);
        $.post('pollchat.php', function(data) {
            $('#content_div_id').html(data);
        });

    }

我的问题是在3秒刷新后它再次位于聊天内容的顶部。。。

整个事物嵌套在一个窗口中，如下所示：

<div class="portlet-body chat-widget" style="overflow-y: auto; width: auto; height: 300px;">
                            <div class="row">
                                <div class="col-lg-12">
                                    <p class="text-center text-muted small">January 1, 2014 at 12:23 PM</p>
                                </div>
                            </div>

                            <div id="content_div_id">

                            </div>
                        </div>

Answer 1

试试这个：
window.scrollTo(0,document.getElementById('content_div_id').scrollHeight);

Answer 2

除了我建议使用setInterval代替setTimeout之外，以下是您需要用来滚动bottom的{{1}}的代码。

div

Answer 3

重点是：你的id =“content_div_id”的div不可滚动。

我使用不同的值创建了一个模拟片段：

添加样式=“overflow-y：hidden; width：auto; height：auto;” to div with id =“content_div_id”
我使用jQuery.get而不是jQuery.post（你需要在你的代码中使用post）
我使用了不同的网址（您需要使用您的网址）
我将计时器移动到ajax中，以便它一次又一次地启动（您可以使用settimer，但如果您这样做，则需要计划如何以及何时停止它）
我使用jQuery append而不是jQuery html，因为我假设你想要追加而不是替换。这取决于你需要哪一个。

var i = 0;
function startRefresh() {
  $.get('https://api.github.com/users', function(data) {
    $('#content_div_id').append(i + ': ' + data[0].id + '<br>');
    i += 1;
    var myDiv = $('div.portlet-body.chat-widget');
    myDiv.scrollTop(myDiv[0].scrollHeight - myDiv[0].clientHeight);
    setTimeout(startRefresh, 300);
  });
}
$(function () {
  startRefresh();
});

#content_div_id {
  width: 50%;
  height: 100px;
  overflow-y: scroll;
}

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<div class="portlet-body chat-widget" style="overflow-y: auto; width: auto; height: 300px;">
    <div class="row">
        <div class="col-lg-12">
            <p class="text-center text-muted small">January 1, 2014 at 12:23 PM</p>
        </div>
    </div>

    <div id="content_div_id" style="overflow-y: hidden; width: auto; height: auto;">

    </div>
</div>

Answer 4

看一下片段。它有你想要的东西。

＆＃13;

$(function() {
  
  startRefresh();    
    });
    function startRefresh() {
        setTimeout(startRefresh,3000);

   // put this in your ajax $.Post callback Like below
   // $.post('pollchat.php', function(data) {
     //   $('#content_div_id').html(data);
     //     var wtf    = $('#content_div_id');
     //     var height = wtf[0].scrollHeight;
      //    wtf.scrollTop(height);
   // });
       var wtf    = $('#content_div_id');
  var height = wtf[0].scrollHeight;
  wtf.scrollTop(height);
    }

＆＃13;

#content_div_id{
width:100%;
  height:300px;
  overflow-y:scroll;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="content_div_id">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>

＆＃13;

自动在ajax请求后滚动到div的底部

4 个答案: