Question

我正在努力解决这个项目。基本上我有一个角度内置的聊天界面，我有一个问题，正确的CSS样式。此时聊天从顶部开始，然后随着对话的增长向下滚动屏幕。我可以滚动对话，但这不是非常好的用户体验。

我正在尝试这样做，因此“发送消息”框在屏幕的底部三分之一处开始并且已修复。然后，随着对话的增长，消息向上/向外移动而不是向下移动。理想情况下，我希望在容器中消失（在标题后面等）。

过去几天，我一直试图将我的大脑包裹起来，运气不佳。 CSS并不是我的强项。任何帮助将不胜感激

CSS＆amp;下面的当前设置图像（还有一个单独的样式表，但这仅适用于按钮/消息样式：

<body><style>
body { background: #FFFFFF; color: #727272; }
h1, h2, h3, h4, { background: #FFFFFF; color: #212121; } body { background: #FFFFFF; color: #727272; }
html, body, form, strong, button, small, input, p, div, h1, h2, h3, h4
{ outline: 0; margin: 0; padding: 0; border: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.4em; font-size: 100%; } !important;
a, a:active
{ color: #F8F8F8; text-decoration: none; }
a:hover { text-decoration: underline; }
button,
a { cursor: pointer; } strong { font-weight: 500; }
p, h1, h2, h3, h4 { margin-top: 1em; margin-bottom: 1em; }
h1, h2, h3, h4 { font-weight: 200; font-size: 32px; }
html, body, p, div { font-weight: 200; font-size: 17px; } .clear { clear: both }
.container { padding-right: 7vw; padding-left: 7vw; margin-right: auto; margin-left: auto; height: 100vh; }
</style><style>
/* .header { overflow: hidden; position: relative; min-height: 100vh; padding-bottom: 0vh; text-align: center; color: #F8F8F8; background: linear-gradient( to left, rgba(122,214,184,0.0) 0%, rgba(122,214,184,0.7) 100% ), linear-gradient( to bottom, rgb(60,240,80) 0%, rgb(122,214,184) 100% ); } */
.header { overflow: hidden; position: relative; min-height: 100vh; padding-bottom: 0vh; text-align: center; color: #F8F8F8; background: linear-gradient( to left, rgba(204,52,148,0.0) 0%, rgba(239,45,86,0.7) 100% ), linear-gradient( to bottom, rgb(204,52,148) 0%, rgb(204,52,148) 100% ); }
input::-webkit-input-placeholder { color: rgba(200,255,255,0.5) !important; } .header .signup { margin-top: 4em; } .header
input { background: transparent; color: #F8F8F8; border: 0; border-bottom: 1px solid rgba(255,255,255,0.8); line-height: 2em; font-size: 1.4em; text-align: center; width: 12em; }

/* .angularjs-chat-bubble-white { position: absolute; display: inline-block; background: transparent url(https://i.imgur.com/3Sdc2xD.png); background-size: 100%; background-repeat: no-repeat; } */
.bothello-bubble { position: absolute; display: inline-block; background: transparent url(https://i.imgur.com/kN9kf2o.png); background-size: 100%; background-repeat: no-repeat; }
.header .bubble-one { top: 15vh; left: 10vw; width: 30px; height: 30px; opacity: 0.1; transform-origin: 70% 400%; animation: bubble-move 3s ease-in-out 0s infinite alternate; }
.header .bubble-two { top: 44vh; left: 6vw; width: 100px; height: 100px; opacity: 0.1; transform-origin: 60% 400%; animation: bubble-move 4s ease-in-out 0s infinite alternate; }
.header .bubble-three { top: 75vh; left: 22vw; width: 20px; height: 20px; opacity: 0.2; transform-origin: 30% 120%; animation: bubble-move 2s ease-in-out 0s infinite alternate; }
.header .bubble-four { top: 14vh; left: 28vw; width: 15px; height: 15px; opacity: 0.1; transform-origin: 20% 400%; animation: bubble-move 2s ease-in-out 0s infinite alternate; }
.header .bubble-five { top: 30vh; left: 66vw; width: 14px; height: 14px; opacity: 0.2; transform-origin: 90% 100%; animation: bubble-move 5s ease-in-out 0s infinite alternate; }
.header .bubble-six { top: 8vh; left: 75vw; width: 23px; height: 23px; opacity: 0.2; transform-origin: 80% 200%; animation: bubble-move 2s ease-in-out 0s infinite alternate; }
.header .bubble-seven { top: 33vh; left: 84vw; width: 120px; height: 120px; opacity: 0.2; transform-origin: 100% 90%; animation: bubble-move 6s ease-in-out 0s infinite alternate; }
.header .bubble-eight { top: 72vh; left: 85vw; width: 360px; height: 360px; opacity: 0.2; transform-origin: -100% 100%; animation: bubble-move 7s ease-in-out 0s infinite alternate; }
/* .messagebox { padding-top: 90vh; position: fixed;} */

@keyframes bubble-move { 0% { opacity: 0.6; transform: scale(1.0) rotate(-8deg) translate(-1px,-2px); } 70% { opacity: 0.3; transform: scale(1.04) rotate(10deg) translate(2px,1px); } 100% { opacity: 0.4;
transform: scale(0.94) rotate(-18deg) translate(-3px,-1px); } }
</style>

<div class="header">
<!-- <div class="container"> -->
<div class="bothello-bubble bubble-one"></div>
<div class="bothello-bubble bubble-two"></div>
<div class="bothello-bubble bubble-three"></div>
<div class="bothello-bubble bubble-four"></div>
<div class="bothello-bubble bubble-five"></div>
<div class="bothello-bubble bubble-six"></div>
<div class="bothello-bubble bubble-seven"></div>
<div class="bothello-bubble bubble-eight"></div>

<div class="container">
<ng-container *ngFor="let message of messages | async">
  <div class="message" [ngClass]="{ 'from': message.sentBy === 'bot',
                                    'to':   message.sentBy === 'user' }">
    {{ message.content }}
  </div>
</ng-container>
<div class="messagebox">
<label for="nameField">Your Message</label>
<input [(ngModel)]="formValue" (keyup.enter)="sendMessage()" type="text">
<button (click)="sendMessage()">Send</button>
</div>


<!-- </div> -->
</div>
</div>
</body>

非常感谢。

杰

Answer 1

您正在寻找：

.container {
  display: flex;
  flex-direction: column;
}

.container>ng-container {
  flex-grow: 1;
  overflow: auto;
}

.container>.messagebox {
  flex-shrink: 0;
  margin-bottom: 3px;
}

每当消息被添加到聊天时，您还需要一个小功能将<ng-container>滚动到底部，这些内容如下：

function scrollToBottom() {
  let elem = document.querySelector('ng-container');
  elem.scrollTop = elem.scrollHeight;
}

我不确定在Angular2（及更高版本）中操作DOM节点的最佳做法是什么，以及是否有超过.querySelector的优惠技术。
另请注意.querySelector可以（并且应该）在任何DOM节点上使用，因此您可能希望在ViewContainer而不是整个document上使用它。

但是，由于你没有发布与JS部分相关的任何内容，我无法帮助你。

在中心

1 个答案: