近期做前端在线聊天页面几个小知识点的总结
2023-09-14 09:00:06 时间
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>
如图所示:
相关文章
- Mybatis知识点全总结
- JS模块化—CJS&AMD&CMD&ES6-前端面试知识点查漏补缺
- JS模块化之CJS&AMD&CMD&ES6-前端面试知识点查漏补缺
- 一天梳理完React面试考察知识点
- 前端框架_React知识点精讲
- JS算法_知识点精讲
- 文件包含漏洞-知识点
- MySQL索引知识点梳理
- PHP 中操作数组的知识点
- 尚医通-前端知识点
- 【BSP视频教程】BSP视频教程第25期:CAN/CANFD/CANopen专题,CAN知识点干货分享, 收发执行过程和错误帧处理(2023-01-03)
- 297个机器学习彩图知识点(15)
- 产品思维知识点
- Numpy基础知识点汇总
- 前端Server-Sent Events、EventSource接口相关知识点总结
- 内存取证知识点小结
- MySQL知识掌握:掌握MySQL的基础知识(mysql知识点)
- Redis 知识总结面试学会关键要点(Redis面试知识点总结)
- 前端面试知识点