Question

我正在使用一个聊天应用程序来获取所有最新的消息并将其显示在div中。我尝试做的是使用setInterval方法每秒更新div，然后使用scrollTop自动将div滚动到div的底部。但现在发生的是每次刷新div时（通过setInterval）它再次从顶部开始，然后使用scrollTop到达底部，然后在一秒钟后再次刷新。这使得div每秒都会上下颠簸，这使得更难以阅读div底部的任何内容。这是我的代码：

<script>
    setInterval(refreshChat, 1000);

    function refreshChat(){
        var allMsgDiv = $('#allMsgs');
        allMsgDiv.scrollTop(20000);
        $.ajax({
            url: '${createLink(action: 'renderChat')}',
            type: 'GET',
            failure: function(){alert("Oops, something went wrong :o")},
            success: function(html){$('#bodyContainer').html(html)}
        });
    }
</script>

ajax函数调用Grails函数，但我认为这与手头的问题无关。这里是div（#allMsgs）：

<div name="allMsgs" id="allMsgs" class="form-control" style="height: 250px;">
<g:each in="${latestMsg}" var="msg">
    <ul>
        <g:if test="${msg.type == "msgLogin"}">
            <li><span class="datetext">(<g:formatDate date="${msg.date}" format="dd/MM HH:mm"/>) ${msg.username} ${msg.message}</span></li>
        </g:if>
        <g:if test="${msg.type == "msgUser"}">
            <li><span class="datetext">(<g:formatDate date="${msg.date}" format="dd/MM HH:mm"/>)</span> <span id="usernametext">${msg.username}</span>: ${msg.message}</li>
        </g:if>
        <g:if test="${msg.type == "msgLogout"}">
            <li><span class="datetext">(<g:formatDate date="${msg.date}" format="dd/MM HH:mm"/>) ${msg.username} ${msg.message}</span></li>
        </g:if>
    </ul>
</g:each>

请告诉我，有一种方法可以使我的消息 - 容器看起来像痉挛一样。提前谢谢。

编辑：哦，是的，我忘记了，这里唯一的css是#allMsgs，它是：

#allMsgs{
    overflow: auto;
}

jquery - scrollTop（）不使用setInterval（）

0 个答案: