vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附; 2. 根据滚动的位置激活对应的tab键(锚链接tab键)
这两种方式的处理都是可通过监听scroll来实现
mounted(){ window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理 }
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 }
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监听滚动事件的资料请关注站长技术其它相关文章!
2 月 18 日消息 据外媒 Windowslatest 报道,在预览版本中发现的参考资料表明,...
1.ajax跨域传递值是所需要的回传的类型为jsonp $.ajax({url: "http://.......",t...
首先插件配备好了,写一个HTML测试一下 首先创建一个文件夹,创建一个HTML 文件...
第一课趣味二进制——修改植物大战僵尸数据 任务介绍 学习目标 知识需求 需求工...
JSP spring boot / cloud 使用filter防止XSS 一.前言 XSS(跨站脚本攻击) 跨站脚...
IT之家2月18日消息外媒 Windows Latest 报道,微软正在与谷歌合作进行一项新的改...
在项目开始之前我们可以先去了解一下IConfiguration接口,.Net Core Web应用程序...
文章目录 前言 本周最重要的五件事情 本周搞砸的四件事情 本周的四个启发 前言 ...
一.前言 .NET Core 是一个通用开发平台,由 Microsoft 和 GitHub 上的 .NET 社区...
昨天刚学了html的一些内容,就迫不及待的想做个京东上面的搜索条,结果做是做出...