事件监听 &amp； 页面滚动（页面滚动到某一位置时显示 隐藏某元素，Vue环境）_监听页面滚动事件

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

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()；语法如下：

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

频】](https://bbs.csdn.net/topics/618166371)**

我特地针对初学者整理一套前端学习资料

[外链图片转存中…(img-JyWlLGkh-1715223111828)]

[外链图片转存中…(img-PFmhgcHQ-1715223111829)]