vue监听滚动事件的方法


Posted in Vue.js onDecember 21, 2020

vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附; 2. 根据滚动的位置激活对应的tab键(锚链接tab键)

这两种方式的处理都是可通过监听scroll来实现

mounted(){
window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理
}

处理方法

1. 滚动到顶部吸附

html元素

<!--如果isFixed为true的话,就添加class is_fixed 设置固定定位-->
<div id="boxFixed" :class="{'is_fixed' : isFixed}">
这个是要滚动到顶部吸附的元素
</div>

methods方法

handleScroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量

let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滚动到顶部吸附的元素的偏移量

this.isFixed = scrollTop > offsetTop ? true : false; // 如果滚动到顶部了,this.isFixed就为true
}

2. 根据滚动的位置激活对应的tab键(锚链接tab键)

vue里实现锚链接,不能直接用a链接方式,因为用的是hash路由,直接a链接会跳转路由,可用scrollIntoView ,具体参照 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

(1) 实现锚链接:

<div class="flexitem" v-for="(item,index) in tabs" :class="seeThis==index?'active':''"><a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(index)">{{item}}</a></div>

<div id="anchor1">block1</div>

(2) 实现滚动到相应的位置激活tab

data(){
return{


seeThis:0,


tabs:['tab0','tab1','tab2'],

}
},
methods:{

goAnchor(index) { // 也可以用scrollIntoView方法, 但由于这里头部设置了固定定位,所以用了这种方法


// document.querySelector('#anchor'+index).scrollIntoView()


this.seeThis = index; var anchor = this.$el.querySelector('#anchor'+index)


document.body.scrollTop = anchor.offsetTop-100


document.documentElement.scrollTop = anchor.offsetTop-100

},
}
methods:{
handleScroll(){


var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop-100


var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop-100


var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop-100


if(scrollTop>anchorOffset0&&scrollTop<anchorOffset1){



this.seeThis = 0


}


if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){



this.seeThis = 1


}


if(scrollTop>anchorOffset2){



this.seeThis = 2


}

},
}

以上就是vue监听滚动事件的方法的详细内容,更多关于vue监听滚动事件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue 插槽简介及使用示例
Nov 19 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 #Vue.js
Vue——前端生成二维码的示例
Dec 19 #Vue.js
You might like
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
python中xrange和range的区别
2014/05/13 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python绘制七段数码管实例代码
2017/12/20 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
旅游个人求职信范文
2014/01/30 职场文书
委托收款证明
2015/06/23 职场文书