Question

我正在尝试使用Python Flask作为后端来创建聊天网页。我想将最近接收和发送的消息对齐，以使其在底部对齐，并且当新消息到达时，味精应该向上移动，并且应该将新消息放在该位置。怎么做？我读过类似的问题，但是不明白如何根据我的需要实施它。

我的聊天页面结构如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="{{
      url_for('static', filename = 'static/css/jquery/jquery.js')
    }
    }
    ">\x3C/script>')
  </script>
  <script type=text/javascript>
    $SCRIPT_ROOT = {
      {
        request.script_root | tojson | safe
      }
    };
    $(function() {
      $('#send_btn').bind('click', function() {

        $.getJSON($SCRIPT_ROOT + '/serve_msg', {
          msg: $('input[name="msg"]').val(),
        }, function(data) {
          var msg = document.createElement('div');
          msg.className = 'msg';
          msg.innerHTML = '<img src="" alt="You"><p id="send_msg"> document.getElementById("msg").value </p><span class="time-left">11:00</span>';
          document.getElementById('msg_box').appendChild(msg);
          $('#send_msg').text($('input[name="msg"]').val())
          $("#reply").text(data.reply);
        });
        return false;
      });
    });
  </script>
  <!--<link rel="stylesheet" href="webi/templates/style.css">-->
  <style type="text/css">
    body {
      background-color: #2a4982;
    }
    
    .container {
      border: 2px solid #dedede;
      background-color: #555555;
      border-radius: 5px;
      align-self: center;
      padding-bottom: 3%;
      margin-top: 4%;
      margin-left: 16%;
      margin-right: 10%;
    }
    
    .chatbox {
      border: 2px solid #dedede;
      background-color: #cac6f1;
      border-radius: 5px;
      align-self: center;
      padding-bottom: 6%;
      margin-left: 15%;
      margin-right: 15%;
    }
    
    .main_heading {
      font-weight: bolder;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      font-size: 30px;
      color: #2981bc;
      -webkit-text-stroke: 1px cornsilk;
      padding-top: -8%;
      padding-bottom: -8%;
    }
    
    .text_input_area {
      margin-top: 1%;
      margin-bottom: -1%;
    }
    
    .msg_box {
      position: relative;
      background: rgb(22, 29, 34);
      /*padding-bottom: 50%;*/
      height: 450px;
      width: 770px;
      overflow: scroll;
    }
    
    .msg_input {
      width: 85%;
      padding-bottom: 3%;
    }
    
    .msg_sent {}
    
    .msg_recieved {}
    /* Style time text */
    
    .time-right {
      float: right;
      color: #aaa;
    }
    /* Style time text */
    
    .time-left {
      float: left;
      color: #999;
    }
    
    .msg {
      position: relative;
      ;
      border: 2px solid #dedede;
      background-color: #f1f1f1;
      border-radius: 5px;
      height: 40px;
      width: fit-content;
      margin: 15px 0;
      bottom: 0px;
    }
    /* Darker chat container */
    
    .msg_recieved {
      border-color: #ccc;
      background-color: #ddd;
    }
    /* Clear floats */
    
    .container::after {
      content: "";
      clear: both;
      display: table;
    }
    /* Style images */
    
    .container img {
      float: left;
      max-width: 60px;
      width: 100%;
      margin-right: 20px;
      border-radius: 50%;
    }
    /* Style the right image */
    
    .container img.right {
      float: right;
      margin-left: 20px;
      margin-right: 0;
    }
  </style>
  <title>AVE - WEB INTERFACE</title>
</head>

<body>
  <div class="container" align="center">
    <p class="main_heading"> AVE - AI Virtual Entity</p>
    <div class="chatbox">
      chatbox
      <div class="msg_box">
        <div class="msg msg_recieved">
          <img src="" alt="Ave">
          <p id="reply">Hello. How are you today?</p>
          <span class="time-right">11:00</span>
        </div>


      </div>

      <div class="input-group mb-3">
        <input type="text" name="msg" id="msg" class="form-control" placeholder="Type your message here!" aria-label="input_area" aria-describedby="send_btn">
        <div class="input-group-append">
          <button class="btn btn-primary" type="button" id="send_btn" onclick="display_send_msg">Send</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

抱歉，代码错误！我是整个想法的新手。可能有很多错误。抱歉

Answer 1

最好的办法是通常将新消息追加到消息div并使用JavaScript / jQuery滚动到该div的底部。

jQuery：

$('.messages').scrollTop($('.messages').height())

Answer 2

假设您有一个基本的标记结构，例如

<main id="msgs">
   <div>Message #0</div>
   <div>Message #1</div>
   <div>Message #2</div>
   <div>Message #3</div>
   <div>Message #4</div>
   <!-- new messages are appended here -->
</main>

使用Flexbox，您可以按相反的顺序放置它们，以便每条新消息都可以在页面顶部看到

main {
   display: flex;
   flex-flow: column-reverse nowrap;
}

然后通过Javascript，一旦您添加了新消息，就需要通过scrollTo(0, 0);滚动主元素。滚动甚至可以通过scroll-behavior: smooth;通过CSS进行改进

在下面的代码段中，每5s都会模拟一条新消息：

var messageArea = document.getElementById('msgs');
messageArea.scrollTo(0, 0);

setInterval(() => {
  /* create a new message element */
  var msgEl = document.createElement('div');
  /* create a string with the message */
  var msgText = 'Message #' + messageArea.children.length;
  /* set the textContent of the element with the message */
  msgEl.textContent = msgText;
  /* append the new message in the container of the messages */
  messageArea.appendChild(msgEl);
   
  /* finally scroll the message area to (0, 0) coords. */
  messageArea.scrollTo(0, 0);
}, 5000)

main {
   height: 100vh;
   display: flex;
   overflow: auto;
   padding: 1em .5em;
   flex-flow: column-reverse nowrap;
   scroll-behavior: smooth;
}

div {
   border: 1px #ccc solid;
   border-radius: 10px;
   padding: 1em;
   margin-top: 1.5em;
   width:60%;
   align-self: flex-start;
}

div:nth-child(2n) {
   align-self: flex-end;
}

<main id="msgs">
   <div>Message #0</div>
   <div>Message #1</div>
   <div>Message #2</div>
   <div>Message #3</div>
   <div>Message #4</div>
</main>

如何将div与底部对齐？

2 个答案: