近期做前端在线聊天页面几个小知识点的总结

1.按回车键进行消息的发送

//全局监测回车键
    var sendMsg = function (event) {
      event = window.event || event;
      if (event.keyCode == 13) {//如果取到的键值是回车
        $scope.sendTextMessage($scope.currentUserId);//执行发送方法
      }
    };
    window.document.onkeydown = sendMsg;//当有键按下时执行函数

2.聊天页面的滚动条始终在页面的最低端

//实现滚动条始终在最底部
      $timeout(function () {
        $('#top').scrollTop($('#top')[0].scrollHeight);
      });

　　至于为什么要加 $timeout  因为如果不加$timeout页面的滚动条会先滚动到最低端 然后页面数据在进行重新绘制之后 滚动条又出现上移的现象。主要是页面数据绘制的比较慢导致的。因为我的页面数据使用了ng-repeat 进行的数据绘制  可能需要时间长一点啊。其他地方使用的时候可以看情况而定。

3.在页面上始终有个悬浮窗  不随页面的滚动而滚动

<div id="divSuspended" class="scrollTop">
      <div class="lineHeightTop" ng-click="openNewWindow()" title="点击进入聊天页面">{{userCount || 0}}人在线</div>
      <div class="lineHeightBottom"><a ng-click="leave()" ng-class="{'red':isLeave,'':!isLeave}">离岗</a></div>
    </div>

　　

<script>
    var top1 = 60;/*初始值*/
    var elem = document.getElementById('divSuspended');
    elem.style.top = top1 + "px";
    window.onscroll = function () {/*鼠标滚动触发函数*/
      elem.style.top = top1 + parseInt(document.documentElement.scrollTop) + parseInt(document.body.scrollTop) + "px";
    };

  </script>

　　如图所示：