我正在尝试构建一个简单的聊天系统,例如Facebook与Messenger一样,将新消息保留在最底部。但是他们添加了标题,并保留了最后一条消息的固定位置,当然还有滚动条

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

请记住,我不需要固定的标题。我确实读到的问题是,聊天div中的“ height:auto”使其变为“ flow”,但这就是保持聊天高度动态的原因。
好吧……如果有人有更好的解决方案将消息放在底部,标题放在顶部,并且到达消息时,标题变得发粘,请。

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

最佳答案

哟,看看这个



(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>

10-05 20:41
查看更多