避免文本在列中向上移动

Question

我正在制作一个网站，您可以在两个不同的列中发送消息（对于两个假定的用户）。有一个脚步声系统每秒都会增加<br>一次，因此消息一出现就会立即上升。所以基本上，每次您发送一条消息时，它都会在您发送的列中上升，直到它在页面顶部消失。

我的问题如下：

每次用户输入一条消息时，它都会使该列的所有其他消息发生变化（我认为这是正常的），但其他人的列不受此更改的影响，因此如果它是一个重要的信息。我想知道这是否可以弥补这一点；因为我已经尝试了很多事情，但我什么也没想到，而且由于我仍在学习，所以我看不到太远哈哈......

https://i.stack.imgur.com/tBouv.gif

body {

    font-family: sans-serif;

    font-size: 1.3rem;

    margin: 0;

    background-color: #5a6c58;

}

.messInd { 

    margin: 0;

    padding: 0;

}

#messL, 

#messR{

    width: 24vw;

    position: fixed;

    bottom: 0;

    background-color: pink;

}

.wrapper {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-gap: 0px;

    grid-auto-rows: minmax(100vh, auto);

    height: 100vh;

}

.pathL,

.pathR

{

    -ms-overflow-style: none;  /* Internet Explorer 10+ */

    scrollbar-width: none;  /* Firefox */

    overflow: scroll;

    position: relative;

    height: 100%;

    background-color: #ffdbf5;

}

.pathL {

    background: rgb(255,219,245);

    overflow: hidden;

    text-align: center;

    padding: 0.5rem;

    grid-column: 1 / 2;

}

.pathR {

    background: rgb(255,255,245);

    grid-column: 2 / 2;

}

 

.pathL::-webkit-scrollbar, 

.pathR::-webkit-scrollbar{ 

    display: none;  /* Safari and Chrome */

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class ="wrapper">

        <div class="pathL" id="droite"> 

            <br><br><br><br><br><br><br><br><br><br><br><br><br>

            <br><br><br><br><br><br><br><br><br><br><br><br><br>

            <br><br><br><br><br><br><br><br><br><br><br><br>

      

              <div id="messL">

                  <input id="mL" autocomplete="off" name="name"/>

              </div> 

        </div> 

Answer 1

所以我现在的答案是：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($('#' + identifier).height());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var compensate = $('#' + identifier).height();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".pathL").append( // the oposite column&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("<div class ='compensate'></div>").css('height', compensate)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );它添加了发送到另一列的消息高度的 div。