事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)

目录 一、效果展示 二、实现步骤 三、涉及要点 1. Vue 语法 v-show 2. 获取窗口到元素顶端的距…

目录

一、效果展示

二、实现步骤

三、涉及要点

1. Vue 语法 v-show

2. 获取窗口到元素顶端的距离

3. 监听事件


一、效果展示

最近在做项目时有一个网页渲染是这样的,某一个元素在开始不显示,只有当页面滑动到指定的位置时才显示该元素。效果如下:

二、实现步骤

1. 创建元素并设置为固定定位。

2. 首先使用 Vue 中的显示隐藏指令 v-show 将需要操作的元素隐藏;

3. methods 中创建监听窗口滚动方法,通过判断元素最顶端与页面最顶端的距离决定是否显示;

4. 创建阶段 created 中绑定监听事件进行监听;

5. 销毁阶段 destory 中删除监听事件,离开页面时删除,以保证它不会影响其他页。

三、涉及要点

1. Vue 语法 v-show

专门控制一个元素显示隐藏的特殊指令,用程序控制一个元素的显示或隐藏时。当 new Vue() 扫描到 v-show,就会先计算 = 右边的判断条件的值,如果 = 右边的判断条件值为 true,则当前元素默认正常显示,如果=右边的判断条件值为 false,则 v-show 自动被翻译为 display:none,当前元素隐藏且不占位

2. 获取窗口到元素顶端的距离

首先需要获取页面滚动的垂直距离。第一步就是获取浏览器的可视区域(在浏览器中能看到页面的区域)。

(1)先使用 document.documentElement 获取页面;

这里需要注意:

在没有声明 DOCTYPE 的 IE 浏览器中,浏览器显示窗口大小只能以下获取:

在声明了 DOCTYPE 的浏览器中,可以用以下来获取浏览器显示窗口大小:

所以为了所有浏览器都能适应,我们可以两者连用:

(2)使用属性 scrollTop 获取位于对象最顶端和窗口中可见内容的最顶端之间的距离,也就是我们所要的操作的 div 最顶端到页面最顶端的距离。

3. 监听事件

添加监听事件:addEventListener();移除监听事件:removeEventListener();语法如下:

  • 第一个参数为事件类型;
  • 第二个参数为事件发生时调用的函数;
  • 第三个参数指定是使用事件冒泡还是事件捕获,此参数可选。

如我们的代码,监听到窗口滚动时调用 methods 中的判断方法。

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/7892.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部