聊天-当元素到达底部时将绝对位置更改为相对位置
[英]Chat - Changing absolute to relative position when element reaches bottom
问题描述
I've created a chat where a user has an input field to enter the text. 
我创建了一个聊天室，其中用户有一个输入字段来输入文本。 When he enters the text and presses Send (or enter) the text is above the input field. 当他输入文本并按发送（或输入）时，文本在输入字段上方。 Like this: 像这样：
What I want: I want the input field to be at the bottom of the page . 我想要的是： 我希望输入字段位于页面的底部 。 I achieved this using position: absolute; 我使用position: absolute;实现了这一点position: absolute;
BUT when the chat has a lot of fields, you cannot scroll back and see the chat. 但是，当聊天具有很多字段时，您将无法向后滚动并查看聊天。
When I set the position to position: relative; 当我将位置设置为position: relative; , you can scroll back the chat. ，您可以向后滚动聊天。
So my question is: 所以我的问题是：
How can I set the input field to be at the bottom ALWAYS, and when the chat-text reaches the top, the user should be able to scroll back to the top. 如何将输入字段设置为始终位于底部，并且当聊天文本到达顶部时，用户应该能够滚动回到顶部。
Here is the HTML: 这是HTML：
<div class="container custom_chat">
<div class="box box-warning direct-chat direct-chat-warning">
<div class="box-body">
<div class="direct-chat-messages">
<div class="direct-chat-msg" ng-repeat="message in listOfMessages track by $index" ng-class="{'right':!message.me}">
<div class="direct-chat-info clearfix" style="margin-top:20px;">
<span class="direct-chat-timestamp " ng-class="{'pull-left':message.me, 'pull-right':!message.me}">{{ message.timeMessage }}</span>
<span class="direct-chat-name" ng-class="{'pull-left':!message.me, 'pull-right':message.me}"><strong>{{ message.senderFirstName }}</strong></span>
</div>
<div class="direct-chat-text right">
<span style="word-break: break-all;">{{ message.content }}</span>
</div>
</div>
</div>
<div class="box-footer" style="margin-top:20px">
<form ng-submit="sendMessage()">
<div class="input-group">
<input type="text" placeholder="Type message..." autofocus="autofocus" class="form-control" ng-model="message.content" ng-enter="sendMessage()">
<span class="input-group-btn">
<button type="submit" class="btn btn-warning btn-flat">Send</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
Here is the CSS: 这是CSS：
.custom_chat {
position: relative;
bottom: 30px;
width: 40%;
margin-left: 33%;
}
I've tried using a container outside this div and making that container position: relative; 我试过在这个div之外使用一个容器，并将其放置在相对位置： I do not understand how offSet can help me here. 我不了解offSet如何在这里为我提供帮助。 Please explain if you use offset. 请说明您是否使用偏移量。
2 个解决方案
解决方案1
1 已采纳 2017-08-31 08:46:27
I think your approach with position:absolute is fine. 我认为您的position:absolute好。 But you need to set overflow:auto to your chat-area . 但是，您需要在您的chat-area设置“ overflow:auto 。
Check below code sample. 检查以下代码示例。
var formatsApp = angular.module('FormatsApp', []); formatsApp.controller('LinksController', function LinksController($scope) { $scope.listOfMessages = ["asdasd"] $scope.message = ""; $scope.sendMessage = function(x) { $scope.listOfMessages.push($scope.message) } });
.direct-chat-messages, .box-footer { position: absolute; bottom: 30px; width: 40%; margin-left: 33%; } .direct-chat-messages { overflow: auto; max-height: 100%; } body { height: 400px; }
<!DOCTYPE html> <html ng-app="FormatsApp" ng-controller="LinksController"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> <meta charset="utf-8" /> </head> <body> <div class="container custom_chat"> <div class="box box-warning direct-chat direct-chat-warning"> <div class="box-body"> <div class="direct-chat-messages"> <div class="direct-chat-msg" ng-repeat="message in listOfMessages track by $index" ng-class="{'right':!message.me}"> <div class="direct-chat-info clearfix" style="margin-top:20px;"> <span class="direct-chat-timestamp " ng-class="{'pull-left':message.me, 'pull-right':!message.me}">{{ message }}</span> <span class="direct-chat-name" ng-class="{'pull-left':!message.me, 'pull-right':message.me}"><strong></strong></span> </div> <div class="direct-chat-text right"> <span style="word-break: break-all;">{{ message.content }}</span> </div> </div> </div> <div class="box-footer" style="margin-top:20px"> <form ng-submit="sendMessage()"> <div class="input-group"> <input type="text" placeholder="Type message..." autofocus="autofocus" class="form-control" ng-model="message" ng-enter="sendMessage(this)"> <span class="input-group-btn"> <button type="submit" class="btn btn-warning btn-flat">Send</button> </span> </div> </form> </div> </div> </div> </div> </body> </html>
解决方案2
0 2017-08-31 08:44:58
First you need to separate your chat area from the input field. 首先，您需要将聊天区域与输入字段分开。
For ol element, since you're using angularjs, you can ng-repeat to create the li elements as chat come in. 对于ol element，由于您使用的是angularjs，因此您可以ng-repeat在聊天进入时创建li元素。
Something like this: 像这样：
<div class="custom_chat">
<ol id="messages" class="chat-messages"></ol>
<div class="box-footer">
<form id="message-form">
<input name="message" placeholder="Type message..." autofocus>
<button type="submit" class="btn btn-warning btn-flat">Send</button>
</form>
</div>
</div>
Then in your CSS do this: 然后在您的CSS中执行以下操作：
.custom_chat {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.chat-messages {
flex-grow: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.box-footer {
background: #e6eaee;
display: flex;
padding: 10px;
flex-shrink: 0;
}
.box-footer form {
flex-grow: 1;
display: flex;
}
.box-footer form * {
margin-right: 10px;
}
.box-footer input {
border: none;
padding: 10px;
flex-grow: 1;
}
.chat-messages {
list-style-type: none;
padding: 10px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.