我正在构建一个聊天应用程序,我希望新消息出现在最底部,而旧消息应该出现在新消息的顶部。我是 CSS 的新手,所以我在 Internet 上找到了这个示例,它通过向右旋转容器同时向左旋转消息来使用transform
CSS属性。direction
chatArea
虽然这可行,但这对我来说似乎有点矫枉过正,而且很难维护,因为这些元素的方向现在是“颠倒的”。例如,因为chatArea
现在旋转了 div 以设置border-top
CSS 属性,所以我实际上需要设置border-bottom
属性。
所以我想知道是否有更简单的解决方案。现在,我正在使用将新消息添加到旧消息之前jQuery
,我尝试了很多组合prepend/append/prependTo
,这是唯一有效的组合,但我不确定前置/附加加上更简单的 CSS 的哪种组合会起作用。
这是jQuery
做前置的代码:
let $messages = jQuery('.messages');
let $message = jQuery('<li class="list-group-item"></li>');
$message.append('<p><strong>' + message.name + ' ' + tm + '</strong></p>');
$message.append('<p>' + message.text + '</p>');
$message.hide().fadeIn(FADE_TIME);
$message.prependTo($messages);
这是 html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Socket.IO</title>
<link rel="stylesheet" href="./css/bootstrap4.1.min.css">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="container">
<div id="conversation" class="row">
<div class="col-md-6 offset-md-3 card">
<a href="./index.html">Change Settings</a>
<h1 class="room-title text-center"></h1>
<div class="chatArea">
<ul class="messages list-group">
<!-- Messages end up here! -->
</ul>
</div>
<form id="message-form">
<div class="form-group">
<input type="text" name="message" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary"/>
<button type="button" id="showUsersButton" class="btn btn-info">Show room users</button>
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/socket.io-1.3.7.js"></script>
<script type="module" src="js/app.js"></script>
<script src="js/moment-2.22.1.js"></script>
<script type="module" src="js/queryParams.js"></script>
</body>
</html>
这是实现旋转的 CSS:
.messages p {
height: 100%;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
direction: ltr;
}
.chatArea {
height: 500px;
overflow-y: scroll;
padding-bottom: 60px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
direction: rtl;
border-bottom: 1px solid #ccc;
}
Flexbox 可以做到这一点……不需要 javascript 或转换。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.container {
width: 80%;
margin: 1em auto;
border: 1px solid grey;
/* magic */
display: flex;
flex-direction: column-reverse;
}
p {
background: lightblue;
margin-top: 1em;
}
<div class="container">
<p class="message">Message6</p>
<p class="message">Message5</p>
<p class="message">Message4</p>
<p class="message">Message3</p>
<p class="message">Message2</p>
<p class="message">Message1</p>
</div>
向上生长是什么意思?如果您在最后添加新文本时遇到问题,一个简单的 append() 应该可以工作
@user1435897 我的意思是新消息应该在旧消息下面
这是我的第一直觉,您可能不需要颠倒顺序(我假设新消息将附加到底部)。但我认为 OP 正在寻找的是滚动位置。应该锁在底部,这个只能用js实现
我认为较新的回复会排在最前面,但我认为基本逻辑是合理的。