Scroll постоянно приходится опускать вниз

02 августа 2019, 22:30

Запуск страници, скрол внизу. Отправил сообщение Клиент -> сервер-> клиент Скрол на месте сообщение внизу,не видно,приходится крутить скролл.

Использую: $('#chat-his').scrollTop($('#chat-his')[0].scrollHeight);

Но куда не вставлю все время приходится крутить скролл,подскажите как исбежать.

var SelectChat = angular.module('SelectChat', ['ngRoute']).config(['$routeProvider', function($routeProvider) { 
  $routeProvider.when("/localhost", { 
    templateUrl: 'index.html', 
    controller: 'NameInfo' 
  }); 
}]).factory('socket', ['$rootScope', function($rootScope) { 
  var port = 8080; 
  var socket = io.connect('http://localhost:' + port); 
 
  return { 
    on: function(eventName, callback) { 
      socket.on(eventName, function(data) { 
        $rootScope.$apply(function() { 
          callback(data) 
        }); 
      }); 
    }, 
    emit: function(eventName, data) { 
      socket.emit(eventName, data); 
      console.log(data); 
    } 
  } 
}]); 
SelectChat.controller('NameInfo', function($scope, socket) { 
 
 
  socket.on('userName', function(userName) { 
    $scope.name = userName; 
  }); 
 
  socket.on('newUser', function(newUser) { 
    //$scope.newUsername = newUser; 
  }); 
 
  socket.on('allMessage', function(date) { 
    console.log("allMEssage"); 
    $scope.text = date.rows; 
    $('#chat-his').scrollTop($('#chat-his')[0].scrollHeight); 
  }); 
 
  socket.on('messageToClient', function(date) { 
    console.log("message toClient"); 
    $scope.text = date.rows; 
    console.log(date.rows); 
    $('#chat-his').scrollTop($('#chat-his')[0].scrollHeight); 
 
  }); 
  socket.on("messageWrite", function(msg) { 
    console.log(msg); 
    $scope.message = msg; 
  }); 
 
  $(document).on('click', '#sendToServer', function(evnt) { 
    console.log("click"); 
    var message = $('textarea').val(); 
    socket.emit('message', message); 
    $('textarea').val(null); 
 
    evnt.stopImmediatePropagation(); 
  }); 
});

<html> 
<head> 
  <meta charset="utf-8"> 
  <script src="javascripts/socket.io.js"></script> 
  <script src="javascripts/jquery.js" charset="utf-8"></script> 
  <script src="javascripts/angular.js"></script> 
  <script src="javascripts/angular-route.js"></script> 
  <script src="javascripts/main.js" charset="utf-8"></script> 
  <link href="stylesheets/main.css" rel="stylesheet"> 
  <!-- Здесь можете подключить ваш main.css --> 
</head> 
<body> 
 
  <header> 
  </header> 
 
  <main ng-app="SelectChat" ng-controller="NameInfo"> 
 
    <div class="container flexBl" ng-app="SelectChat" ng-controller="NameInfo"> 
      <div class="people-list"> 
        <div class="search"> 
          <li class="fa-search"></li> 
 
          <input type="text" placeholder="search" /> 
          <ul> 
            <li class="flexBl"> 
              <img src="images\511163.jpg" alt="avatar" /> 
              <div class="about"> 
                <div>Прохоров Антон</div> 
              </div> 
            </li> 
          </ul> 
        </div> 
      </div> 
 
 
      <div class="chat"> 
        <div class="chatHeader flexBl"> 
          <img src="images\511163.jpg" /> 
          <div class="chat-about"> 
            <div class="chat-with"> Проэхоров Антон</div> 
            <div class="chat-num-message">150</div> 
          </div> 
 
          <div class="chat-history" id="chat-his"> 
            <ul> 
              <li class="flexBl" ng-repeat="texts in text"> 
                <div class="message other-message floatright"> 
                  {{texts.text}} 
                </div> 
              </li> 
            </ul> 
 
          </div> 
        </div> 
        <div class="chat-message flexBl"> 
          <textarea rows="3"> 
             
                        </textarea> 
          <button id="sendToServer">Send</button> 
        </div> 
      </div> 
    </div> 
  </main> 
</body> 
</html>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отправка писем по шаблону

Нужно мне решить задачу такуюНа сайте есть таблица, которая подгружается по ajax (офферы с данными) Нужно вытягивать с определенных div'ов переменные,...

MySQL