Question

<script type="text/javascript">    
var elementshoku = document.getElementById("1on1shoku");
    var lastHeightshoku = elementshoku.scrollHeight;
    function detectChangeshoku(){
        var currentHeightshoku = elementshoku.scrollHeight;
        if(lastHeightshoku != currentHeightshoku){
    alert("xxx");
    elementshoku.scrollTop = currentHeightshoku;
    lastHeightshoku = currentHeightshoku;
        }
    }
    var mesazhet_shoku = setInterval(detectChangeshoku, 200); 
</script>

我正在聊天，我想在用户写邮件时将div滚动到底部。我正在使用该功能，但它无法正常工作。我确实放了alert();函数来检查上面的函数是否有效。我尝试了很多方法，但没有一种方法可行。知道为什么它不起作用吗？

由于

编辑：

我看到我的问题不够明确。我正在聊天，如果有新的消息，我希望div自动滚动到底部。在这个答案中，据说这样做https://stackoverflow.com/a/7666680/1932887，但它对我不起作用。有什么想法吗？

Answer 1

使用jQuery：

jqEl.scrollTop(jqEl.scrollHeight());

使用DOM：

oEl.scrollTop = oEl.scrollHeight;

fiddle

Answer 2

在呈现之前，您无法请求getElementById("1on1shoku")并阅读scrollHeight。把第一行放在onload中就像这样：

<script type="text/javascript">
var elementshoku, lastHeightshoku;
window.onload=function() {
    elementshoku = document.getElementById("1on1shoku");
    lastHeightshoku = elementshoku.scrollHeight;
}
function detectChangeshoku(){
    var currentHeightshoku = elementshoku.scrollHeight;
    if(lastHeightshoku != currentHeightshoku){
        elementshoku.scrollTop = currentHeightshoku;
        lastHeightshoku = currentHeightshoku;
    }
}
var mesazhet_shoku = setInterval(detectChangeshoku, 200);
</script>

Answer 3

尝试使用jQuery。它可以帮助您的代码更清晰，更易于理解，以便将来维护。通过使用jQuery，您可以通过以下方式完成：

$(window).load(function() {
    $("html, body").animate({ scrollTop: $("#1on1shoku").scrollTop() }, 1000);
});

添加新消息后滚动到底部

3 个答案:

fiddle