聊天室自動滾動效果實現

1.聊天區域

<div id="chatlist">
</div>

2.css設置

#chatlist {
    position: fixed;
    width: 100%;
    bottom: 4rem;
    max-height: 200px;
    overflow-y: scroll;
}

3.監聽消息並處理

function setOnReceiveMessageListener() {
    rong.setOnReceiveMessageListener(function (ret, err) {
        ret.result.message.content.extra = JSON.parse(ret.result.message.content.extra); // 字符串處理成json
        // 將消息展示到頁面中
        var interText = doT.template($("#chat_row_tmpl").text());
        $("#chatlist").append(interText(ret.result.message.content));

        // 讓消息自動滾動
        var chatlist = document.getElementById('chatlist');
        chatlist.scrollTop = chatlist.scrollHeight;
    })
}

dot消息模板

<script id="chat_row_tmpl" type="text/html/x-dot-template">
    <div class="aui-row">
        <div class="aui-col-xs-9 aui-padded-t-15 aui-padded-l-10">
            <div class="bj  aui-font-size-14 color_qianl aui-padded-l-10" style="padding:0.2rem 0.6rem;">
                <div class="aui-label aui-label-danger"></div>
                <span class="color_fen"> {{= it.extra.nickname}}:</span> {{= it.text}}
            </div>
        </div>
    </div>
</script>

ps：沒用到什么插件，就是一些基本的js和css，就能夠很好的實現效果！

核心就是這里，

// 讓消息自動滾動
var chatlist = document.getElementById('chatlist');
chatlist.scrollTop = chatlist.scrollHeight;

數據通過dot，進行動態展示！

// 將消息展示到頁面中
var interText = doT.template($("#chat_row_tmpl").text());
$("#chatlist").append(interText(ret.result.message.content));