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

目录

一            、效果展示

二
  
 
  
 
  
 
  
 
  
 
  
 、实现步骤

三











、涉及要点

1. Vue 语法 v-show

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

3. 监听事件

一 
  
  
  
  
  
 、效果展示

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

二
  
  
  
  
  
  、实现步骤

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);