Question

我创建了一个聊天，其中用户有一个输入字段来输入文本。当他输入文本并按发送（或输入）时，文本位于输入字段上方。像这样：

我想要的是什么：我希望输入字段位于页面底部。我使用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的方法很好。但您需要将overflow:auto设置为chat-area。

检查以下代码示例。

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元素，由于您正在使用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 个答案: