为了账号安全,请及时绑定邮箱和手机立即绑定

避免文本在列中向上移动

避免文本在列中向上移动

FFIVE 2023-08-24 17:32:22
我正在制作一个网站,您可以在两个不同的列中发送消息(对于两个假定的用户)。有一个脚步声系统每秒都会增加<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> 
查看完整描述

1 回答

?
料青山看我应如是

TA贡献1772条经验 获得超7个赞

所以我现在的答案是:


            console.log($('#' + identifier).height());

            var compensate = $('#' + identifier).height();


            $(".pathL").append( // the oposite column

                $("<div class ='compensate'></div>").css('height', compensate)

                );


它添加了发送到另一列的消息高度的 div。


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 88 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信