Vue.js实战之通过监听滚动事件实现动态锚点


Posted in Javascript onApril 04, 2017

前言

前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下:

Vue.js实战之通过监听滚动事件实现动态锚点

如果是传统项目,这个效果就非常简单。但是放到 Vue 中,就有两大难题:

      1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动?

      2. 如何监听页面滚动事件?

在浏览了大量文章、进行多次尝试之后,终于解决了这些问题

期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted

一、锚点实现

在实现平滑滚动之前,得先确保基本的锚点功能

如果没有其他要求,直接用 <a href="#id" rel="external nofollow" > 是最简单粗暴的办法

但是为了满足后续的要求,必须另外想办法 

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

Vue.js实战之通过监听滚动事件实现动态锚点

然后在子组件中添加一个 jump 方法

Vue.js实战之通过监听滚动事件实现动态锚点

jump (index) {
 let jump = document.querySelectorAll('.d_jump')
 // 获取需要滚动的距离
 let total = jump[index].offsetTop
 // Chrome
 document.body.scrollTop = total
 // Firefox
 document.documentElement.scrollTop = total
 // Safari
 window.pageYOffset = total
},

通过 offsetTop 获取对象到窗体顶部的距离,然后赋值给 scrollTop,就能实现锚点的功能

需要注意的是:各浏览器下获取 scrollTop 有所差异

      Chrome: document.body.scrollTop

      Firefox: document.documentElement.scrollTop

      Safari: window.pageYOffset

二、平滑滚动

仅仅是锚点是不够的,这样的跳转十分突兀

为了更好的用户体验 ,需要将滚动的过程展现出来

如果有 jQuery 实现平滑滚动就非常简单:

$('html body').animate({scrollTop: total}, 500);

可惜没如果~~

在看了好些文章之后,有了一个大概的开发思路:

将总距离分成很多小段,然后每隔一段时间跳一段

只要每段的时间足够短,频次足够多,在视觉上就是正常的平滑滚动了

// 平滑滚动,时长500ms,每10ms一跳,共50跳
// 获取当前滚动条与窗体顶部的距离
let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
// 计算每一小段的距离
let step = total / 50
(function smoothDown () {
 if (distance < total) {
 distance += step
// 移动一小段
 document.body.scrollTop = distance
 document.documentElement.scrollTop = distance
 window.pageYOffset = distance

// 设定每一次跳动的时间间隔为10ms
 setTimeout(smoothDown, 10)
 } else {

// 限制滚动停止时的距离
 document.body.scrollTop = total
 document.documentElement.scrollTop = total
 window.pageYOffset = total
 }
})()

实际情况下,得考虑向上滚动和向下滚动两种情况,完整的代码为:

jump (index) {
 // 用 class="d_jump" 添加锚点
 let jump = document.querySelectorAll('.d_jump')
 let total = jump[index].offsetTop
 let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
 // 平滑滚动,时长500ms,每10ms一跳,共50跳
 let step = total / 50
 if (total > distance) {
 smoothDown()
 } else {
 let newTotal = distance - total
 step = newTotal / 50
 smoothUp()
 }
 function smoothDown () {
 if (distance < total) {
 distance += step


 document.body.scrollTop = distance
 document.documentElement.scrollTop = distance
 window.pageYOffset = distance
 setTimeout(smoothDown, 10)
 } else {
 document.body.scrollTop = total
 document.documentElement.scrollTop = total
 window.pageYOffset = total
 }
 }
 function smoothUp () {
 if (distance > total) {
 distance -= step



 document.body.scrollTop = distance
 document.documentElement.scrollTop = distance
 window.pageYOffset = distance
 setTimeout(smoothUp, 10)
 } else {
 document.body.scrollTop = total
 document.documentElement.scrollTop = total
 window.pageYOffset = total
 }
 } 
 }

三、修改锚点状态

在上面展示的效果中,当页面滚动的时候,锚点的激活状态会有相应的改变

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

但是在 Vue 中,应该在什么地方监听滚动事件呢?

mounted: function () {
 this.$nextTick(function () {
 window.addEventListener('scroll', this.onScroll)
 })
 },
 methods: {
 onScroll () {
 let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  // 586、1063分别为第二个和第三个锚点对应的距离
 if (scrolled >= 1063) {
 this.steps.active = 2
 } else if (scrolled < 1063 && scrolled >= 586) {
 this.steps.active = 1
 } else {
 this.steps.active = 0
 }
 }
 }

上面的代码中,我先写了一个修改锚点状态的方法 onScroll,然后在 mounted 中监听 scroll 事件,并执行 onScroll 方法

mounted 是 Vue 生命周期中的一个状态,在这个状态下,$el (vue 实例的根元素)已经创建完毕,但还没有加载数据

从结果上看,也可以在 created 状态下监听 scroll 事件

如果对 mounted 和 created 还不够了解,可以参考官方文档·生命周期图示

总结

上面只能算是一个应急之法,而且这种操作 DOM 的方法,并不符合 Vue 的设计理念,待我研究出更合理更高效的办法之后,再发出来分享~

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
初识javascript 文档碎片
Jul 13 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
浅谈vue首屏加载优化
Jun 28 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
原生js生成图片验证码
Oct 11 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 #Javascript
Vue.js实战之组件的进阶
Apr 04 #Javascript
关于axios返回空对象的问题解决
Apr 04 #Javascript
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
JavaScript实现实时更新系统时间的实例代码
Apr 04 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
python绘制漏斗图步骤详解
2019/03/04 Python
python实现堆排序的实例讲解
2020/02/21 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
消防先进事迹材料
2014/02/10 职场文书
捐资助学倡议书
2014/04/15 职场文书
书法大赛策划方案
2014/06/04 职场文书
文言文辞职信
2015/02/28 职场文书
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技