javascript监听事件之监听页面滚动的示例

　　介绍

这篇文章主要为大家展示了javascript监听事件之监听页面滚动的示例,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“javascript监听事件之监听页面滚动的示例”这篇文章吧。

javascript的特点

1. javascript主要用来向HTML页面添加交互行为。 　　2. javascript可以直接嵌入到HTML页面,但写成单独的js文件有利于结构和行为的分离。 　　3.JavaScript具有跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行。

<强>监听事件

代码

function  pageChange  (), { 　　,,,//,,,页面滚动时,需要做的事情 　　} 　　window.addEventListener (“scroll",,, pageChange,,假),

知识点

1,使用窗口。addEventListener和文档。addEventListener来处理页面上的事件,区别仅仅在于:不同事件模型上,处理的顺序不一样。

捕获,窗口先于文档

冒泡,文档先于窗口

2,参数
addEventListener(类型:字符串,侦听器:函数,useCapture:布尔=false,优先级:int=0, useWeakReference:布尔=false)

1)类型:字符串,事件的类型

2)听众:函数侦听到事件后处理事件的函数

3) useCapture:布尔(默认=false)
这里牵扯到“事件流”的概念。
侦听器在侦听时有三个阶段:捕获阶段,目标阶段和冒泡阶段。
顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→

目标阶段(目标本身)→
,,,,,,冒泡阶段(目标本身到根节点)。

此处的参数确定侦听器是运行于捕获阶段,目标阶段还是冒泡阶段。
如果将useCapture设置为真,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。如果useCapture为假,则侦听器只在目标或冒泡阶段处理事件。

要在所有三个阶段都侦听事件,请调用两次addEventListener,一次将useCapture设置为真的,第二次再将useCapture设置为假的。

4)优先级:int(默认=0)
事件侦听器的优先级。
优先级由一个带符号的32位整数指定。
数字越大,优先级越高。
优先级为n的所有侦听器会在优先级为n - 1的侦听器之前得到处理。如果两个或更多个侦听器共享相同的优先级,则按照它们的添加顺序进行处理。
默认优先级为0。

5) useWeakReference:布尔(默认=false)
确定对侦听器的引用是强引用,还是弱引用。
强引用(默认值)可防止您的侦听器被当作垃圾回收。弱引用则没有此作用。

获取页面滚动高度

代码

function  getScrollTop (), { 　　,,,return  window.pageYOffset  　　,,,,,,,| |,document.documentElement.scrollTop , 　　,,,,,,,| |,document.body.scrollTop , 　　,,,,,,,| |,0; 　　}

浏览器兼容性


谷歌火狐IE360Microsoft Edgewindow.pageYOffsetYesYesYesYesYesdocument.documentElement.scrollTopYesYesYesYesNodocument.body。scrollTopNoNoNoNoYes

其中,pageYOffset属性返回文档在窗口左上角垂直方向滚动的像素

<强>让页面滚动至指定位置

代码

/*,滚动动画 　　,,:,当前页面滚动高度 　　,,,站:指定位置滚动高度 　　,*/function  tabAnimation(年代,停止),{ 　　,,,var  type =, s  & lt;, sTop  ?, true :,假的,,//,true 页面上滑 　　 　　,,,var  timmer =, requestAnimationFrame (function  fn (), { 　　,,,,,,,if (类型),{,s +=50}, 　　,,,,,,,else  {, s -=50} 　　,,,,,,,如果((type ,,, s 祝辞,停止),| |,(! type ,,, s  & lt;,停止)),{ 　　,,,,,,,,,,,//,el.scrollTop 美元;=,停止; 　　,,,,,,,,,,,window.scrollTo(0,,停止),, 　　,,,,,,,},{else  　　,,,,,,,,,,,//,el.scrollTop 美元;=,年代; 　　,,,,,,,,,,,window.scrollTo(0,年代),, 　　,,,,,,,,,timmer =, requestAnimationFrame (fn); 　　,,,,,,,} 　　,,,}); 　　}

说明

window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。

当你需要更新屏幕画面时就可以调用此方法。在浏览器下次重绘前执行回调函数。回调的次数通常是每秒60次,但大多数浏览器通常匹配W3C所建议的刷新频率。

在大多数浏览器里,当运行在后台标签页或者隐藏的& lt; iframe>里时,requestAnimationFrame()会暂停调用以提升性能和电池寿命。

javascript监听事件之监听页面滚动的示例