vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)


Posted in Javascript onJune 11, 2020

1、是否滚动到底部

isScrollBottom() {
   // 是否滚动到了底部
   this.box = this.$refs.chatListWrapper
   var clientHeight = this.box.clientHeight
   var scrollTop = this.box.scrollTop
   var scrollHeight = this.box.scrollHeight
   if (scrollTop + clientHeight == scrollHeight) {
    this.$store.dispatch('setBottomBtn', false, { root: true }) // 隐藏直达最新消息按钮
    this.isBottom = true
    this.isTop = false
   } else {
    this.$store.dispatch('setBottomBtn', true, { root: true }) // 显示直达最新消息按钮
    this.isTop = false
    this.isBottom = false
    if (scrollTop == 0) {
     this.isTop = true
    }
   }
  },

2、scroll滚动方向判断

getDirection() {
   // scroll滚动方向~~~~
   this.box = this.$refs.chatListWrapper
   var scrollTop = this.box.scrollTop
   var scroll = scrollTop - this.initTop
   this.initTop = scrollTop
   let dir = 'down'
   if (scroll < 0) {
    dir = 'up'
   } else {
    dir = 'down'
   }
   return dir
  },

3、滚动节流

1)、在滚动的dom上绑定scroll事件,监听滚动

vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

2)、data中定义:fnScroll: () => {}, 初始值
3)、mounted中给fnScroll函数赋值,_.throttle实现滚动节流

this.fnScroll = _.throttle(() => {
}, 500)

4、获取滚动可视区域内dom:

实现注意:判断当前元素是否在可视区域内,若在则存到isSeeDomArr中,然后循环isSeeDomArr数组,拿到当前可视区域内的最后一个dom,再去判断是否更新对应的咨询轨迹。
不要滚动时就去更新,这样会造成不停请求更新,最后一次请求可能无效,造成数据的错乱

sendRead() {
   const chatLi = document
    .getElementById('chat_list_wrapper')
    .getElementsByTagName('li')
   var container = this.$refs.chatListWrapper
   var swHeight = container.clientHeight
   const scrollTop = container.scrollTop
   const aa = swHeight + scrollTop
   let isSeeDomArr = []
   for (let j = 0; j < chatLi.length; j++) {
    if (scrollTop < chatLi[j].offsetTop && chatLi[j].offsetTop < aa) {
     isSeeDomArr.push(chatLi[j]) //将可视区域内所有dom存储到isSeeDomArr
    }
   }
   if (isSeeDomArr.length) {
    // 非 ceo接诊台更新消息的已读状态
    if (this.$route.path.indexOf('diagnose/ceo') === -1) {
     for (let m = 0; m < isSeeDomArr.length; m++) {
      const isSelfSend = isSeeDomArr[m].getAttribute('isSelfSend')
      const msgStatus = isSeeDomArr[m].getAttribute('msgStatus')
      const msgType = isSeeDomArr[m].getAttribute('msgType')
      if (!isSelfSend && !msgStatus && msgType !== 'notice') {
       const _id = isSeeDomArr[m].getAttribute('id')
       this.sendReadApi(_id)
      }
     }
    }
    // 更新聊天对应的咨询轨迹
    this.setCurrentFdAsk(
     isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')
    )
   }
  },

the end:滚动加载这些判断前前后后改了好多次,这次终于感觉逻辑比较清晰了,也算对自己有个交代。。。

到此这篇关于vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)的文章就介绍到这了,更多相关vue scroll滚动判断内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 #Javascript
Vue组件为什么data必须是一个函数
Jun 11 #Javascript
Vue实现点击箭头上下移动效果
Jun 11 #Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 #Javascript
详解vue 组件
Jun 11 #Javascript
vue实现员工信息录入功能
Jun 11 #Javascript
JavaScript Event Loop相关原理解析
Jun 10 #Javascript
You might like
PHP Document 代码注释规范
2009/04/13 PHP
php split汉字
2009/06/05 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
Javascript面向对象编程
2012/03/18 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
纯JS实现轮播图
2017/02/22 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
Python入门篇之列表和元组
2014/10/17 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
分享vim python缩进等一些配置
2018/07/02 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
C++面试题目
2013/06/25 面试题
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
大学生军训自我评价分享
2013/11/09 职场文书
保险内勤岗位职责
2014/04/05 职场文书
股东合作协议书
2014/04/14 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
小学大队长竞选稿
2015/11/20 职场文书