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

lovXin 发布于2019-08-26 14:00 / 2383人阅读

摘要：滚动条不会出现在头部和底部视窗中。新增功能滚动条置底分页加载的时候，保持滚动条置于上次停留的位置。我们来看一下动态图，实现的功能今天只把这个具体视窗口的滚动条的总结一下，其他两个问题，没有很大的意义。

一、前言

之前写了一个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/hap...

项目【后端】端源代码地址：https://github.com/saucxs/hap...

欢迎fork和start。

线上地址：http://chat.chengxinsong.cn/

二、具体【视窗口】的滚动条的问题

环境：vue

我们先来看一下，给滚动条添加监听事件，必须在created或者mouted周期中，添加scroll的监听事件。

 mounted: function () {
    window.addEventListener("scroll", this.handleScroll, true);  // 监听（绑定）滚轮滚动事件
  },

其中handleScroll事件是methods里的事件：

 handleScroll() {
      this.viewBox = this.$refs.viewBox;
      console.log(this.viewBox.scrollTop, "到头部的距离-------------------")
      console.log(this.viewBox.scrollHeight, "滚动条的总高度-------------------")
    }

注意：div 到头部的距离 + 屏幕高度 = 可滚动的总高度
this.$refs.viewBox取到视窗口的dom对象，必须确定dom加载完毕了。

如果我们想置底，我们必须将【滚动条总高度】赋值给【滚动条到头部的距离】。这样就置底了。

业务是这样的：（1）当进入到聊天页面时候，这时候置底。（2）如果翻看之前的聊天记录，这时候就不需要置底，保持在当前的位置。

1、先解决【进入到聊天页面时候，这时候置底】的问题

解决方案：（1）全局设置一个标志位，如果是第一次进入，【标志位为置底】，执行置底方法。（2）如果是翻看之前聊天记录，【标志位改为不置底】，不执行置底方法。（3）监听内容变化方法，判断标志位是啥，然后看是否执行置底方法。

watch: {
    message() {
      this.viewBox = this.$refs.viewBox
      if(this.type == "bottom"){
        this.refresh();
      }
    }
},

refresh就是一个置底方法。

refresh() {
      setTimeout(() => {
            this.viewBox.scrollTop = this.viewBox.scrollHeight
    }, 100)
},

2、如果翻看之前的聊天记录，这时候就【不需要置底，保持在当前的位置】

如果不置底，就是一直在保持在顶部。

思路：将加载之前的【数据高度】（此时滚动条的总高度）存放在临时变量beforeScrollHeight中；将数据加载之后的到【头部的距离】 = 【此时滚动条总高度】- 【临时变量beforeScrollHeight】。

看一下代码实现：

监听message值变化

watch: {
   message() {
      if(this.type == "bottom"){
        this.refresh();
      }else{
        this.nofresh()
      }
  }
},

主要看nofresh方法

 nofresh() {
      setTimeout(() => {
        this.afterScrollHeight = this.viewBox.scrollHeight - this.beforeScrollHeight;
        this.viewBox.scrollTop = this.afterScrollHeight;
      }, 100)
},

加载更多的方法

 loadMore() {
     this.beforeScrollHeight = this.viewBox.scrollHeight;
     // 分页请求数据，包装数据。
 }

我们来看一下动态图，实现的功能

今天只把这个具体视窗口的滚动条的总结一下，其他两个问题，没有很大的意义。

【上述源码地址】项目地址：https://github.com/saucxs/hap... ，欢迎fork和start。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109954.html

css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
国内存在感最低的前端API——浏览器路由

摘要：最新一直在看关于和路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由的。在浏览器中实现前端路由主要有两种方式一个是我们常用的，另一个是提供的。该对象的和分别表示的各个部分，它们因此被称为分解属性。最新一直在看关于 Vue 和 React 路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由 API 的。本着追根溯源的初心，于是就想着将浏览...

U2FsdGVkX1x 2019-08-23 17:10 评论0 收藏0
国内存在感最低的前端API——浏览器路由

摘要：最新一直在看关于和路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由的。在浏览器中实现前端路由主要有两种方式一个是我们常用的，另一个是提供的。该对象的和分别表示的各个部分，它们因此被称为分解属性。最新一直在看关于 Vue 和 React 路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由 API 的。本着追根溯源的初心，于是就想着将浏览...

tolerious 2019-08-29 18:44 评论0 收藏0
JavaScript 编程精解中文第三版十五、处理事件

摘要：事件与节点每个浏览器事件处理器被注册在上下文中。事件对象虽然目前为止我们忽略了它，事件处理器函数作为对象传递事件对象。若事件处理器不希望执行默认行为通常是因为已经处理了该事件，会调用事件对象的方法。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Handling Events 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分...

Clect 2019-08-23 18:19 评论0 收藏0