html - 聊天框 html-css 不关注最近的消息
问题描述
我正在为聊天创建 HTML,问题是当有滚动时聊天从顶部出现......显示第一条消息而不是最近的消息。
<div id="chat-wrapper">
<div id="chat-container">
<ul>
<li class="you">Hello</li>
<li class="me">Hello</li>
<li class="you">How are you?</li>
<li class="me">I am fine</li>
<li class="me">How are you</li>
<li class="you">I am fine also</li>
<li class="me">So, whats up</li>
<li class="you">Nothing much, <br /> you tell</li>
<li class="me">This is recent message</li>
</ul>
</div>
</div>
CSS
#chat-wrapper {
background:#777;
min-width:300px;
max-width:600px;
margin:10px auto;
height:250px;
position:relative;
overflow: hidden;
}
#chat-container {
position:absolute;
top:auto;
bottom:0;
left:0;
width:100%;
overflow-y:auto;
padding:5px 0;
}
#chat-container ul {
list-style:none;
margin:0;
padding:0;
}
#chat-container li {
display:block;
padding:20px 10px 5px;
position:relative;
margin:15px 5px 10px;
background-color:#000;
border-radius:4px;
}
#chat-container li::before {
position:absolute;
padding:2px 5px;
line-height:1em;
color:black;
top:-7px;
left:15px;
font-size:10px;
}
#chat-container li.you {
color:yellow
}
#chat-container li.me {
color:green;
text-align:right;
}
#chat-container li.you::before {
content:'YOU';
background:yellow;
}
#chat-container li.me::before {
content:'ME';
left:auto;
right:15px;
background:green;
}
https://codepen.io/alikhan999/pen/BaWYXwO
如果我向容器提供位置顶部或高度,则出现滚动,但显示第一条消息而不是最近的消息。
解决方案
推荐阅读
- php - 在 Woocommerce 中按星级 ASC 添加产品排序选项
- .net-core - Windows 和 Linux 上的 Net Core Worker 服务
- c++ - Qt C++ 是静态thread_local QNetworkAccessManager 线程应用程序的好选择吗?
- python - 从 Python 中的两个数据数组中检测模式
- java - 数据库访问和模型在内存中的存储
- python-3.x - 如何根据熊猫中的多个条件返回布尔系列?
- java - Kafka 配置未在 Spring Boot 中从 Spring 配置服务器加载
- javascript - 不读取手机上的 CSS 文件、JS 和图片
- django - Django Rest Framework - 序列化程序中带有查询参数的 URL
- python - 将文件下载到临时位置(例如在 RAM 中),以 http-request 中的 blob/编码格式返回,然后删除文件