javascript - 聊天界面的响应宽度

Question

我试图创建一个这样的聊天插件

如何使聊天消息 div 响应？

而且我想让这个自动滚动到更新的聊天，目前我正在使用这个

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

和这样的结果，它不会立即滚动到更新的聊天，它总是等待几秒钟

编辑 1

这是我当前的聊天 css

.message {
    margin: 0 15px 20px;
    padding: 10px 20px;
    position: relative;
    font-size: 15px;
    width: auto;
    min-width:1vw;
    max-width: 80%;
}
.message.to {
    background-color: #673ab7;
    color: #fff;
    margin-left: auto;
    text-align: right;
    white-space: pre-wrap;
    border-radius: 10px 10px 0px 10px;
}
.message.from {
    background-color: #e5e4e9;
    color: #363636;
    margin-right: auto;
    border-radius: 10px 10px 10px 0px;
}

现在看起来像这样

标签： javascripthtmlcssangular

Answer 1

没有太多代码，我会给你一个响应式的基本示例

body{
  margin:0;
}
.container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 800px;
  max-width: 100%;
  background: salmon;
  padding: 15px;
}
.message {
    margin: 0 15px 20px;
    padding: 10px 20px;
    position: relative;
    font-size: 15px;
    width: auto;
    min-width:1vw;
    max-width: 80%;
}
.message.to {
    background-color: #673ab7;
    color: #fff;
    margin-left: auto;
    text-align: right;
    white-space: pre-wrap;
    border-radius: 10px 10px 0px 10px;
}
.message.from {
    background-color: #e5e4e9;
    color: #363636;
    margin-right: auto;
    border-radius: 10px 10px 10px 0px;
}

<div class="container">
  <div class="message from">Hi</div>
  <div class="message from">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur nisl nec velit lacinia facilisis. Vivamus quis nunc eu nisi fermentum pharetra sit amet quis purus. Nunc rutrum nisl nec rutrum commodo. Suspendisse potenti. Aenean quis porttitor turpis. Nulla nibh nulla, euismod ac pretium vel, viverra at arcu. Proin eu sem non sem eleifend congue. Fusce scelerisque, massa ut finibus ultricies, urna odio suscipit justo, nec feugiat ex ex at est. Mauris nec eleifend nulla, sit amet egestas nulla. Cras vel magna quis ante sollicitudin semper. Phasellus in turpis ut sem malesuada rutrum at eget ipsum.</div>
  <div class="message to">Hi</div>
  <div class="message to">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur nisl nec velit lacinia facilisis. Vivamus quis nunc eu nisi fermentum pharetra sit amet quis purus. Nunc rutrum nisl nec rutrum commodo. Suspendisse potenti. Aenean quis porttitor turpis. Nulla nibh nulla, euismod ac pretium vel, viverra at arcu. Proin eu sem non sem eleifend congue. Fusce scelerisque, massa ut finibus ultricies, urna odio suscipit justo, nec feugiat ex ex at est. Mauris nec eleifend nulla, sit amet egestas nulla. Cras vel magna quis ante sollicitudin semper. Phasellus in turpis ut sem malesuada rutrum at eget ipsum.</div>
</div>