事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)
目录
一、效果展示
最近在做项目时有一个网页渲染是这样的,某一个元素在开始不显示,只有当页面滑动到指定的位置时才显示该元素。效果如下:
二、实现步骤
1. 创建元素并设置为固定定位。
2. 首先使用 Vue 中的显示隐藏指令 v-show 将需要操作的元素隐藏;
3. methods 中创建监听窗口滚动方法,通过判断元素最顶端与页面最顶端的距离决定是否显示;
//监听窗口滚动
windowScrollListener() {
//获取操作元素最顶端到页面顶端的垂直距离
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop >= 480) {
this.isVisable = true; //大于480时显示元素
}
if (scrollTop < 480) {
this.isVisable = false; //小于480时隐藏元素
}
}
4. 创建阶段 created 中绑定监听事件进行监听;
created() {
//添加滚动监听事件
//在窗口滚动时调用监听窗口滚动方法
window.addEventListener('scroll', this.windowScrollListener);
},
5. 销毁阶段 destory 中删除监听事件,离开页面时删除,以保证它不会影响其他页。
destroyed() {
//离开页面时删除该监听
window.removeEventListener('scroll', this.windowScrollListener)
}
三、涉及要点
1. Vue 语法 v-show
<元素 v-show="true/false">
专门控制一个元素显示隐藏的特殊指令,用程序控制一个元素的显示或隐藏时。当 new Vue() 扫描到 v-show,就会先计算 = 右边的判断条件的值,如果 = 右边的判断条件值为 true,则当前元素默认正常显示,如果=右边的判断条件值为 false,则 v-show 自动被翻译为 display:none,当前元素隐藏且不占位。
2. 获取窗口到元素顶端的距离
首先需要获取页面滚动的垂直距离。第一步就是获取浏览器的可视区域(在浏览器中能看到页面的区域)。
(1)先使用 document.documentElement 获取页面;
这里需要注意:
在没有声明 DOCTYPE 的 IE 浏览器中,浏览器显示窗口大小只能以下获取:
document.body.offsetWidth document.body.offsetHeight
在声明了 DOCTYPE 的浏览器中,可以用以下来获取浏览器显示窗口大小:
document.documentElement.clientWidth document.documentElement.clientHeight
所以为了所有浏览器都能适应,我们可以两者连用:
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
(2)使用属性 scrollTop 获取位于对象最顶端和窗口中可见内容的最顶端之间的距离,也就是我们所要的操作的 div 最顶端到页面最顶端的距离。
3. 监听事件
添加监听事件:addEventListener();移除监听事件:removeEventListener();语法如下:
element.addEventListener(event, function, useCapture);
- 第一个参数为事件类型;
- 第二个参数为事件发生时调用的函数;
- 第三个参数指定是使用事件冒泡还是事件捕获,此参数可选。
如我们的代码,监听到窗口滚动时调用 methods 中的判断方法。
window.addEventListener('scroll', this.windowScrollListener);
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- 与阿里云容器服务 ACK 发行版的深度对话第一弹:如何借助 sealer 实现快速构建 & 部署
- Java 容器 & 泛型:三、HashSet,TreeSet 和 LinkedHashSet比较
- 前端学习 -- Html&Css -- 表格
- [Angular 2] 9. Replace ng-modle with #ref & events
- [Bootstrap] 1. container & container-fluid
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- [AWS DA] AWS Monitoring & Audit: CloudWatch, X-Ray and CloudTrail
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
- [Whole Web] [Node.js] [Browserify] [Grunt] Automation task with grunt-browserify & grunt-contrib-watch
- Vue入门教程:node安装vue命令行工具及启动项目
- standalone vue initialization process - Vue应用的初始化过程
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- Python语言学习:Python语言学习之迭代/递归/OS输入输出/错误&异常处理的简介、案例应用之详细攻略
- ML/DL之激活函数/求导函数:ML中常用的AF激活函数(step_function、sigmoid、softmax、ReLU等)&求导函数等代码实现之详细攻略
- cmp指令at&t汇编简单例子注解
- 【大数据&AI人工智能】万字拆解 “大模型” !——详细追溯ChatGPT各项能力的起源
- K&R练习题6-1统计关键词出现的次数
- Vue中vue-i18n结合vant-ui实现国际化
- Ant自己主动编译打包&公布 android项目
- payload免杀之Installutil.exe&csc.exe利用【自己win7机器复现ok】 我下载的.net framework是4.8 不是最新的哈 最新的没有v2 csc.exe
- consul分布式集群搭建&简单功能测试&故障恢复【h】
- Vue(二)vue 指令及用法举例
- Java Number & Math 类
- 【线代&NumPy】 特征值分解
- ALSA & ASOC