聊天-當元素到達底部時將絕對位置更改為相對位置

Question

我創建了一個聊天室，其中用戶有一個輸入字段來輸入文本。 當他輸入文本並按發送（或輸入）時，文本在輸入字段上方。 像這樣：

我想要的是： 我希望輸入字段位於頁面的底部 。 我使用position: absolute;實現了這一點position: absolute;

但是，當聊天具有很多字段時，您將無法向后滾動並查看聊天。

當我將位置設置為position: relative; ，您可以向后滾動聊天。

所以我的問題是：

如何將輸入字段設置為始終位於底部，並且當聊天文本到達頂部時，用戶應該能夠滾動回到頂部。

這是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>

這是CSS：

    .custom_chat {
    position: relative;
    bottom: 30px;
    width: 40%;
    margin-left: 33%;
}

我試過在這個div之外使用一個容器，並將其放置在相對位置： 我不了解offSet如何在這里為我提供幫助。 請說明您是否使用偏移量。

Answer 1

我認為您的position:absolute好。 但是，您需要在您的chat-area設置“ overflow:auto 。

檢查以下代碼示例。

 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>

Answer 2

首先，您需要將聊天區域與輸入字段分開。

對於ol element，由於您使用的是angularjs，因此您可以ng-repeat在聊天進入時創建li元素。
像這樣：

    <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>

然后在您的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;
}

聊天-當元素到達底部時將絕對位置更改為相對位置

問題描述

2 個解決方案

解決方案1
1 已采納 2017-08-31 08:46:27

解決方案2
0 2017-08-31 08:44:58

聊天-當元素到達底部時將絕對位置更改為相對位置

問題描述

2 個解決方案

解決方案1 1 已采納 2017-08-31 08:46:27

解決方案2 0 2017-08-31 08:44:58

解決方案1
1 已采納 2017-08-31 08:46:27

解決方案2
0 2017-08-31 08:44:58