【问题标题】:Chat system with messages at the bottom of the div在 div 底部带有消息的聊天系统
【发布时间】:2017-09-01 19:21:53
【问题描述】:

我正在尝试构建一个简单的聊天系统,就像 facebook 对 messenger 所做的那样,将新消息保留在底部。但是他们添加了一个标题并保持最后一条消息的固定位置,当然还有滚动条

Here is my try... but no scrollbar and the header do not move too.

请记住,我不想要一个固定的标题。我读到的问题是聊天 div 中的“height:auto”使它“流动”,但这就是保持聊天高度动态的原因。 好吧...如果有人有更好的解决方案来将消息保持在底部,标题在顶部,并且当消息到达标题时变得粘滞,请。

PS: With only the ccs3 display:flex, I been able to achieve my goal here.. very simple.. It's possible without ? even with JS' '

【问题讨论】:

    标签: javascript html css


    【解决方案1】:

    哟,看看这个

    (function(i) {
      $(".click").click(function() {
    
        if (parseInt($(".chat .placeholder").css("margin-bottom")) > 32) {
          $(".chat .placeholder").css("margin-bottom", "-=50px");
        }
    
        else if ($(".chat .placeholder").css("margin-bottom") == "32px") {
          $(".chat .placeholder").css("margin-bottom", "0px");
        }
    
        $(".chat").append("<p>hey " + (++i) + "</p>");
       
       $(".chat").scrollTop( $(".chat").prop('scrollHeight') - $(".chat").outerHeight() );
    
      })
    })(0);
    .main .chat {
      width: 100%;
      position: absolute;
      top: 30px;
      background: red;
      box-sizing: border-box;
      height: 200px;
      overflow: auto;
    }
    
    .chat p {
      background: blue;
      padding: 16px 20px;
      margin: 0;
    }
    
    .main .header {
      position: relative;
      background: yellow;
      height: 18px;
    }
    
    p.placeholder {
      width: 100%;
      padding: 0;
      margin-top: 0;
      margin-bottom: 132px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type='button' class='click' value='add'>
    <div class='main'>
    
      <div class='chat'>
        <p class="placeholder header">Header</p>
        <p>hello</p>
      </div>
    </div>

    【讨论】:

    • 感谢您的回答,但 z-index 仅使“标题”在其他 div 上可见“绝对||相关”并且具有像固定 div 的行为.. 我希望聊天 div 扩展并在屏幕上长出标题,在主 div 中创建一个滚动条,将新消息保留在底部。就像脸书一样。
    • 这里还是一样。标题固定。我可以使用 display:flex.. 但我只需要 css2.. 检查 flex 版本jsfiddle.net/cLtkt0sw。谢谢
    • @RicardoGomes 我更改了标题。立即检查。
    • Nop.. 现在标题在 .chat“蓝色”之间有一个“边距”。所以不粘..看看我用 display:flex 制作的版本。但我需要在 safari:ios 中工作并且不需要.. 我正在尝试使用表格.. 似乎 facebook 是这样做的。谢谢你..
    • @RicardoGomes 我看了你的版本。现在我已经逐个像素地制作了与您的演示相同的演示。
    【解决方案2】:

    现在我明白你的问题是什么了:

    只需从 .chat 中删除 position: absolute;

    【讨论】:

    • 感谢您的回答,是的.. 但这不是问题。我希望标题在外面.. 随着 .chat 扩展而不是标题上方。
    • 重做我的答案。忘记 z-index 的东西
    • 然后消息将保持在顶部,新消息将到达旧消息下方。和它的标题是固定的。我的目标是底部的新消息,历史增长到顶部,当到达标题时使其粘在消息上。当然还有滚动条。一种!如果可能的话,没有javascript!我刚刚发现了“display:flex”..如果没有这个新的 ccs3 东西.. 更好。谢谢
    猜你喜欢
    • 2020-01-16
    • 2013-02-02
    • 1970-01-01
    • 1970-01-01
    • 2018-10-09
    • 2021-02-05
    • 2021-12-08
    • 2022-10-26
    • 1970-01-01
    相关资源
    最近更新 更多