チャット - 要素が最下位に達すると、絶対位置から相対位置への変更

ユーザーがテキストを入力するための入力フィールドを持つチャットを作成しました。彼がテキストを入力し、送信（または入力）を押すと、テキストは入力フィールドの上に表示されます。チャット - 要素が最下位に達すると、絶対位置から相対位置への変更

私が欲しいもの：このようIは、入力フィールドがページの下部になりたいです。私はposition: absolute;

を使用して、これを達成しかしチャットはフィールドをたくさん持っているとき、あなたが戻ってスクロールしてチャットを見ることができません。

位置をposition: relative;に設定すると、チャットをスクロールバックすることができます。

だから私の質問は次のとおりです。

私はいつも一番下にあるように、入力フィールドを設定することができ、チャットテキストがトップに達したときに、ユーザーがスクロールすることができるはず方法トップに戻る。私はこのdivの外にコンテナを使用し、そのコンテナの位置を作ってみた

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

：ここ
<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である：ここでは

はHTMLで相対。ここでoffSetがどのように役立つのか分かりません。オフセットを使用するかどうかを説明してください。

出典

2017-08-31 IkePr

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>

出典

2017-08-31 08:46:27

本当にありがとうございました！私は完全にオーバーフローを忘れてしまった。これは私のために働いた。 – IkePr

まず、チャットエリアと入力フィールドを区切る必要があります。あなたがangularjsを使用しているので、チャットが入って来て、あなたはng-repeatはli要素を作成することができますol要素について

、
このような何か：あなたのCSSで次に

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

は、次の操作を行います。

.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; 
}

出典

2017-08-31 08:44:58

チャット - 要素が最下位に達すると、絶対位置から相対位置への変更

答えて

関連する問題