Tools-让带有滑动条的Div滑动到最底部

目的

背景为制作一个Web在线聊天室页面，需要在每次发送信息后是的div滚动到最底部以实现看到最新消息。
"1"
可以通过将scrollTop设置为scrollHeight来实现

document.querySelector('#chat-log').scrollTop = document.querySelector('#chat-log').scrollHeight;

其中关键代码如下：
room.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="/static/dist/css/share.min.css" rel="stylesheet">
    <title>Private chat</title>
    <style>
        .content{
            display:block;
            margin: 20px auto;
            width: 95%;
            height: 650px;
        }
        .right-chat-panel{
            width: 100%;
            height: 100%;
            float: left;
        }
        .chat-box-window{
            width: 100%;
            height: 85%;
            overflow: auto;
            background-color: #bce8f1;
            zIndex: -1;
        }
        .chat-area{
            width: 100%;
            height: 20%;
        }
        .share_con{
            display:block;
            margin:0px auto;
            width: 362px;
            text-align:center;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="right-chat-panel" id="main-content">
        <div class="chat-box-window" id="chat-log" disabled></div><br/>
        <div class="chat-area">
            <div class="input-group">
                <input type="text" class="form-control" id="chat-message-input">
                <span class="input-group-btn">
                    <input class="btn btn-default" id="chat-message-submit" type="button" value="Send"/>
                </span>
            </div>
            <div class="social-share share_con" ></div>
            <script src="/static/dist/js/social-share.min.js"></script>
        </div>
    </div>
</div>
</body>
<script>
    var roomName = {{ room_name_json|safe }};
    var userInfo = {{ user_info|safe }};

    var chatSocket = new WebSocket('ws://' + window.location.host + '/ws/chat/' + roomName + '/');

    chatSocket.onmessage = function(e) {
        var data = JSON.parse(e.data);
        var message = data['message'];
        document.querySelector('#chat-log').innerHTML += (message);
        document.querySelector('#chat-log').scrollTop = document.querySelector('#chat-log').scrollHeight;
    };

    chatSocket.onclose = function(e) {
        console.error('Chat socket closed unexpectedly');
    };

    document.querySelector('#chat-message-input').focus();
    document.querySelector('#chat-message-input').onkeyup = function(e) {
        if (e.keyCode === 13) {  // enter, return
            document.querySelector('#chat-message-submit').click();
        }
    };

    document.querySelector('#chat-message-submit').onclick = function(e) {
        var messageInputDom = document.querySelector('#chat-message-input');
        var message = messageInputDom.value;
        var content =  "<div><h4><span class='label label-default'>"+ getCookie("username") + "</span>" + message + "</h4></div>";

        chatSocket.send(JSON.stringify({
            'message': content
        }));
        messageInputDom.value = '';
    };
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name)  == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    };
</script>
</html>
posted @ 2020-05-07 12:09  宋不争  阅读(171)  评论(0)  编辑  收藏  举报