当前位置: 首页 > Web前端 > vue.js

vuescroll滚动判断:是否滚动到底部,滚动方向,滚动节流,获取滚动区域dom元素

时间:2023-03-31 20:05:10 vue.js

1,是否滚动到底部isScrollBottom(){//是否滚动到底部this.box=这个。$参考。chatListWrappervarclientHeight=this.box.clientHeightvarscrollTop=this.box.scrollTopvarscrollHeight=this.box.scrollHeightif(scrollTop+clientHeight==scrollHeight){this.$store.dispatch('setBottomBtn',false,{root:true})//隐藏直接到最新消息的按钮this.isBottom=truethis.isTop=false}else{this.$store.dispatch('setBottomBtn',true,{root:true})//显示直接到最新消息按钮this.isTop=falsethis.isBottom=falseif(scrollTop==0){this.isTop=true}}},2、滚动方向判断getDirection(){//滚动方向~~~~this.box=this.$refs.chatListWrappervarscrollTop=this.box.scrollTopvarscroll=scrollTop-this.initTopthis.initTop=scrollTopletdir='down'if(scroll<0){dir='向上'}else{dir='down'}returndir},3.滚动节流1),在滚动dom上绑定滚动事件,监听滚动2),data中定义:fnScroll:()=>{},初始值3)、给mounted中的fnScroll函数赋值,_.throttle实现滚动节流当前元素是否在可见区域,如果是,则存入isSeeDomArr,然后循环isSeeDomArr数组,得到最后一个dom在当前可见区域,再判断是否更新对应的咨询轨迹不要在滚动的时候更新,这样会导致不停的请求更新,最后一次请求可能无效,导致数据混乱容器=this.$refs.chatListWrappervarswHeight=container.clientHeightconstscrollTop=container.scrollTopconstaa=swHeight+scrollTopletisSeeDomArr=[]for(letj=0;j