摘要:监听事件代码页面滚动时,需要做的事情知识点使用和来处理页面上的事件,区别仅仅在于不同事件模型上,处理的顺序不一样。此处的参数确定侦听器是运行于捕获阶段目标阶段还是冒泡阶段。如果为,则侦听器只在目标或冒泡阶段处理事件。事件侦听器的优先级。
监听事件 代码
function pageChange () { // ... 页面滚动时,需要做的事情 } window.addEventListener("scroll" , pageChange, false);知识点
1、使用 window.addEventListener 和 document.addEventListener 来处理页面上的事件,区别仅仅在于:不同事件模型上,处理的顺序不一样。
捕获,window 先于 document
冒泡,document 先于 window
2、参数
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false)
1) type: String 事件的类型
2) listener: Function 侦听到事件后处理事件的函数
3) useCapture: Boolean(default = false)
这里牵扯到“事件流”的概念。
侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。
顺序 为:捕获阶段(根节点到子节点检查是否调用了监听函数)→
目标阶段(目标本身)→ 冒泡阶段(目标本身到根节点)。
此处的参数确定侦听器是运行于捕获阶段、 目标阶段还是冒泡阶段。
如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。
要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false。
4) priority: int (default = 0)
事件侦听器的优先级。
优先级由一个带符号的 32 位整数指定。
数字越大,优先级越高。
优先级为 n 的所有侦听器会在优先级为 n -1 的侦听器之前得到处理。 如果两个或更多个侦听器共享相同的优先级,则按照它们的添加顺序进行处理。
默认优先级为 0。
5) useWeakReference:Boolean (default = false)
确定对侦听器的引用是强引用,还是弱引用。
强引用(默认值)可防止您的侦听器被当作垃圾回收。 弱引用则没有此作用。
function getScrollTop() { return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; }浏览器兼容性
谷歌 | 火狐 | IE | 360 | Microsoft Edge | |
---|---|---|---|---|---|
window.pageYOffset | Yes | Yes | Yes | Yes | Yes |
document.documentElement.scrollTop | Yes | Yes | Yes | Yes | No |
document.body.scrollTop | No | No | No | No | Yes |
其中,pageYOffset 属性返回文档在窗口左上角垂直方向滚动的像素
让页面滚动至指定位置 代码/* 滚动动画 s: 当前页面滚动高度 sTop: 指定位置滚动高度 */ function tabAnimation(s, sTop) { var type = s < sTop ? true : false; // true 页面上滑 var timmer = requestAnimationFrame(function fn() { if (type) { s+=50 } else { s-=50 } if((type && s > sTop) || (!type && s < sTop)) { // $el.scrollTop = sTop; window.scrollTo(0, sTop); } else { // $el.scrollTop = s; window.scrollTo(0, s); timmer = requestAnimationFrame(fn); } }); }说明
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。
当你需要更新屏幕画面时就可以调用此方法。在浏览器下次重绘前执行回调函数。回调的次数通常是每秒60次,但大多数浏览器通常匹配 W3C 所建议的刷新频率。
在大多数浏览器里,当运行在后台标签页或者隐藏的
原生方法实现 addClass、removeClass 和 hasClassfunction hasClass( elements, cName ) { return !!elements.className.match( new RegExp( "(s|^)" + cName + "(s|$)") ) } function addClass( elements, cName ) { if( !hasClass( elements,cName ) ) { elements.className += " " + cName; } } function removeClass( elements, cName ){ if( hasClass( elements,cName ) ){ elements.className = elements.className.replace( new RegExp( "(s|^)" + cName + "(s|$)" ), " " ); } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/98608.html
摘要:用于获得当前元素到定位父级顶部的距离偏移值。后来在项目中总会遇到滚动吸顶的效果需要实现,现在我将我知道的种滚动吸顶实现方式做详细介绍。有兼容性问题,在微信浏览器某些版本中的值会为,于是乎也就有了第三种方案的兼容性写法。修改版预览 这篇文章是三天前写就的,有大佬给我提了一些修改意见,我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。 修改内容如下: 添加...
摘要:因为项目需求,最近开始转到微信公众号开发,接触到了框架,这个效果的实现虽说是基于框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的。上面我们得到了一个的属性值,接下来我们只需要根据它的值来设置吸顶元素的属性就可以了。 因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的。 进入正题...
摘要:直接由合成线程处理的事件不经过内核线程就能快速处理的输入事件为手势输入事件滑动捏合。划重点最骚的来了,虽然手势事件可以不在内核线程处理,但是手势事件的产生还是离不开内核线程。 passived到底有什么用? passived主要用于优化浏览器页面滚动的性能,让页面滚动更顺滑~~ passived产生的历史时间线 addEventListener():大家都是认识的,为dom添加触发事件...
摘要:后两个属性可选。属性定义了项目的缩小比例,默认为,即如果空间不足,该项目将缩小。属性定义了在分配多余空间之前,项目占据的主轴空间。它的默认值为,即项目的本来大小。结合的异步组件和的代码分割功能,轻松实现路由组件的懒加载。 项目总结 这是我第二个用 Vue 实现的项目,下面内容包括了在实现过程中所记录的知识点以及一些小技巧 项目演示地址:https://music-vue.n-y.io源...
阅读 1326·2021-10-09 09:44
阅读 1339·2021-09-28 09:36
阅读 15685·2021-09-22 15:55
阅读 1193·2021-09-22 15:45
阅读 2168·2021-09-02 09:48
阅读 2695·2019-08-29 17:19
阅读 2268·2019-08-29 10:54
阅读 826·2019-08-23 18:40