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-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
python 简单的多线程链接实现代码
2016/08/28 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
python 从list中随机取值的方法
2020/11/16 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
党性教育心得体会
2014/09/03 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
荒岛余生观后感
2015/06/09 职场文书
2015年中秋寄语
2015/07/31 职场文书
五年级作文之劳动作文
2019/11/12 职场文书