【JavaScript系列】vue项目中实现滚动条（具体视窗口的滚动条）操作：（1）置底，（2）置于上次停留的位置

一、前言

之前写了一个happyChat的项目，主要是想学习一下socketIO的使用。然后最近在给happyChat做前端优化和升级。发现第一版做的很low。

需要优化的问题：

1、问题1：滚动条会出现在头部和底部的视窗中，之前固定头部和固定底部是使用`position:fixed`。

解决方案：body和html禁止`overflow:hidden`，头部和底部是`position:relative`，聊天视窗使用`overflow: auto`，这样聊天视窗才会出现滚动条。滚动条不会出现在头部和底部视窗中。

2、问题2：聊天视窗一次性加载了所有的聊天内容，如果数据太多会出现超时的问题。

解决方案：聊天内容查询使用分页查询，一次性查询20条或者30条。

3、问题3：群聊的时候，找不到群成员列表。

解决方案：做一个群信息汇总的组件，包括群成员列表。

新增功能：（1）滚动条置底；（2）分页加载的时候，保持滚动条置于上次停留的位置。

项目【前端】源代码地址：https://github.com/saucxs/happy-chat-web

项目【后端】端源代码地址：https://github.com/saucxs/happy-chat-node 

欢迎fork和start。