项目中的需求:要求前端把webSocket获取到的后台实时消息显示在一个固定的div中;
1、把消息向上推送的方法:用到了jq的prepend方法,将后台传递过来的消息向上添加到div的ul中,向上显示最新的消息:
var div = $("#div");
div.prepend("推送的消息");
效果图如下:
2、把新消息向下推送的思路是:将固定的div的滚动条高度设置为与ul高度一致:
var div = $("#div");
div.append("推送的消息");
div.scrollTop($("#ul").height());
效果图如下: