Question

我正在构建一个聊天应用程序并需要将消息锚定到消息索引的底部并且长大而不是从消息索引的顶部悬挂。我建立了这个反应，所以下面的代码实际上是JSX。

消息索引：

        <div className="chat-message-index">
         {this.state.activeChannel.messages.map(function(message{
           return <Message key={message.sid} message={message} />;
            })}
        </div>

消息（在索引中呈现）：

<div className="chat-message">
  <b className="name">{this.state.author}</b><br/>
  <span dangerouslySetInnerHTML={{__html: this.state.message.body}} />
</div>

CSS：

.chat-message-index {
  height: calc(~"100vh - 250px");
  position: absolute;
  overflow-y: scroll;
  width: 100%;
  background-color: silver;
  display: list-item;
}

.chat-message {
  position:relative;
  padding:10px;
  margin:22px 45px 22px 20px;
  color:#fff;
  background:#43464b;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#aeb5ba), to(#43464b));
  background:-moz-linear-gradient(#aeb5ba, #43464b);
  background:-o-linear-gradient(#aeb5ba, #43464b);
  background:linear-gradient(#aeb5ba, #43464b);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

我已经尝试了我能想到的每一个CSS技巧，我通过谷歌搜索找到的每个想法，以及SO，我都找不到任何东西。我最接近的是通过在消息索引和消息上使用transform:rotate(180deg);，但是反转滚动并导致滚动条出现在索引的左侧，而不是工作。我可能会采用这种方法，但感觉非常黑客，我的直觉是它会引起头痛......

有人知道如何简单地反转<div>的锚定吗？我想要的只是第一条消息显示在消息索引<div>的底部，然后每个附加消息堆叠在之前的<div>之上。

Answer 1

Flexbox可以做到这一点：

.chatbox {
  margin: 1em auto;
  width: 150px;
  height: 500px;
  border: 1px solid grey;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  text-align: center;
}
.message {
  background: lightgreen;
  margin-bottom: .25em;
  padding: .25em 0 0 0;
  border-bottom: 2px solid green;
}

<div class="chatbox">
  <div class="message">MESSAGE 1</div>
  <div class="message">MESSAGE 2</div>
  <div class="message">MESSAGE 3</div>
  <div class="message">MESSAGE 4</div>
  <div class="message">MESSAGE 5</div>
  <div class="message">MESSAGE 6</div>
  <div class="message">MESSAGE 7</div>
  <div class="message">MESSAGE 8</div>
  <div class="message">MESSAGE 9</div>
  <div class="message">MESSAGE 10</div>
  <div class="message">MESSAGE 11</div>
  <div class="message">MESSAGE 12</div>
</div>

Answer 2

你可以尝试两件事：

[css]将flexbox与flex-direction: column-reverse一起使用。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction。他们的example完全符合您的要求。
[js]对您的邮件列表进行排序，以使最顶层的项目位于索引0，最旧的项目位于索引last。这不如上面的css解决方案那么干净。

如何将`<div>`内部的锚定反转到底部而不是顶部？

2 个答案: