Vue.js在实战中通过监控滚动事件实现动态锚点

序

几天前，在做一个项目的时候，需要实现一个动态锚点的效果。具体效果如下：

如果是传统项目，效果很简单。但是当你把它放在Vue中时，有两个主要问题：

1.没有jQuery的animate()方法，如何实现平滑滚动？

2.如何监控页面滚动事件？

在浏览了大量文章并做了多次尝试后，这些问题终于得到了解决

该周期主要涉及在Vue生命周期中setTimeout和mounted的递归使用

一、锚点实现

在实现平滑滚动之前，首先要保证基本的锚点功能

如果没有其他要求，使用a href=' # id ' rel=' external no follow '是最简单粗暴的方法

但是，为了满足后续要求，我们必须找到另一种方法

首先在父组件(表单)中添加class='d_jump '作为钩子

然后对子组件添加跳转方法

jump(index){ let jump=document . queryselectorall('。d _ jump’)//获取滚动的距离让total=jump [index]。offsettop//Chromedocument。body . scrollTop=total//Firefox document . document element . scroll top=total//safari window . page offset=total }，通过offsetTop获取对象到表单顶部的距离，然后分配给scroll top，就可以实现锚点的功能了

需要注意的是，在不同的浏览器下获取scrollTop是有区别的

Chrome: document.body.scrollTop

Firefox:document . document element . scroll top

Safari: window.pageYOffset

第二，平滑滚动

仅仅是锚点是不够的，这样的跳跃非常突然

为了获得更好的用户体验，有必要显示滚动过程

用jQuery实现平滑滚动非常简单：

$(“html正文”)。动画({scrollTop:总计}，500)；可惜，没有如果~ ~

看了很多文章，我有了一个大概的发展思路：

把总距离分成许多小段，然后偶尔跳一跳

只要每个片段的时间足够短，频率足够高，视觉上就是正常流畅的滚动

//平滑滚动，时长500ms，每10ms跳转一次。总共50跳//获取当前滚动条与表单顶部之间的距离让距离=document . document element . scroll top | | window . page offset | | document.body.scrollTop//计算每个段的距离让步长=total/50(函数smooth down(){ if(distance total){ distance=step//移动一小段文档. body . scroll top=distance document . document element . scroll top=distance window . page offset=distance//将每次跳转的时间间隔设置为10ms setTimeout(smoothDown，10)} else {//limitdocument . body . scroll top=total document . document element . scroll top=total window . page offset=total } }))实际上，应该考虑向上滚动和向下滚动两种情况。完整的代码是：

跳转(索引){//用class='d_jump '让jump=document添加锚点。queryselectorall('。d _ jump’)让total=jump [index]。offsettoplet distance=document . document element . scroll top | | window . page offset | | document.body.scrolltop//smooth滚动，持续时间为500ms，每10ms跳转一次。总共50跳让step=total/50 if(总距离){ smooth down()} else {让new total=distance-total step=new total/50 smooth up()}函数smooth down(){ if(distance total){ distance=step document . body . scroll top=distance document . document element . scroll top=distance window . pageyoffset=distance setTimeout(smooth Dow n，10)} else { document . body . scroll top=total document . document . document . document . scroll top=to修改锚定状态

在上面显示的效果中，当页面滚动时，锚点的激活状态将相应地改变

其实这个效果并不难，只需要听页面滚动事件，然后根据滚动条的距离修改锚点状态即可

但是在Vue，我应该在哪里收听滚动事件呢？

mounted: function () { this。$ next tick(function(){ window . addeventlistener(' scroll '，this.onScroll) }) }，methods : { onScroll(){ let scroll=document . document element . scroll top | | window . pageyoffset | | document . body . scroll top//586、1063是距离if(scroll=1063){ this。台阶。active=2} else if(滚动1063次滚动=586次){this。台阶。active=1 } Else { this . steps . active=0 } }在上面的代码中，我首先编写了一个onScroll方法来修改锚点状态，然后在mounted中监听滚动事件并执行onScroll方法

挂载是Vue生命周期中的一种状态。在这种状态下，已经创建了$ El(VUE实例的根元素)，但是还没有加载数据

从结果中，您还可以听到处于创建状态的滚动事件

如果您对挂载和创建了解不够，可以参考官方文档和生命周期图

摘要

以上只能算是应急方法，这种操作DOM的方法不符合Vue的设计理念。等我研究出一个更合理更高效的方法后，我会发出来分享~

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。