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 相关文章推荐
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
javascript实现下拉菜单效果
Feb 09 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
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
js实现登陆遮罩效果的方法
2015/07/28 Javascript
Underscore源码分析
2015/12/30 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Python入门篇之正则表达式
2014/10/20 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python实现Kmeans聚类算法
2020/06/10 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python多线程同步实例教程
2019/08/11 Python
python groupby 函数 as_index详解
2019/12/16 Python
python dumps和loads区别详解
2020/02/04 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
幼儿园教学工作总结2015
2015/05/12 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python