ajax請求後自動滾動到div的底部

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

問題是：您的div與id =「content_div_id」不可滾動。

我創建一個模擬片斷，採用不同的值：

• 添加風格= 「溢出-Y：隱藏;寬度：汽車;高度：汽車;」使用id =「content_div_id」
• 我用來代替jQuery.post jQuery.get到div的（你需要使用後在代碼）
• 我用一個不同的URL（您需要使用您的網址）
• 我把計時器移到了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 2

試試這個：
window.scrollTo(0,document.getElementById('content_div_id').scrollHeight);

Answer 3

除了我使用setInterval代替setTimeout的建議，這裏是你需要的代碼用於滾動到div的bottom。

$(function() { 
    setInterval(function() { 
    startRefresh(); 
    }, 3000) 
}); 

function startRefresh() { 
    $.post('pollchat.php', function(data) { 
    $('#content_div_id').html(data); 

    $('#content_div_id').scrollTop($('#content_div_id')[0].scrollHeight);//scrolls to bottom of div #content_div_id 
    }); 
} 

Answer 4

看一看片段。它有你想要的。

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

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

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