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 相关文章推荐
js DataSet数据源处理代码
Mar 29 Javascript
在模板页面的js使用办法
Apr 01 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
Jquery注册事件实现方法
May 18 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
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 session劫持和防范的方法
2013/11/12 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
PHP的引用详解
2015/02/22 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
js如何验证密码强度
2020/03/18 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python 基础教程之Map使用方法
2017/01/17 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
python实现五子棋游戏
2019/06/18 Python
python读取ini配置文件过程示范
2019/12/23 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
Oracle的内存结构(Memory structures)
2015/06/10 面试题
园艺师求职信
2014/03/10 职场文书
关于安全演讲稿
2014/05/09 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
师德师风的心得体会
2014/09/02 职场文书
护士工作失误检讨书
2014/09/14 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
正则表达式拆分url实例代码
2022/02/24 Java/Android