H5 中监听页面滚动事件,判断滚动方向的方法
2017-07-07 17:18
579 查看
在做 H5 开发的时候,有时候需要监听页面的滚动的事件,根据页面滚动方向的不同来进行不同的操作,通常是判断页面是向上滚动还是向下滚动,那么怎么判断呢,只需要使用下面的区区几十行代码即可。
//监听页面滚动事件 function scrollEvent() { window.onscroll = function(e){ scrollFunc(); if(scrollDirection == 'down'){ //页面向下滚动要做的事情 } else if(scrollDirection == 'up'){ //页面向上滚动要做的事情 } } } var scrollAction = {x: 'undefined', y: 'undefined'}, scrollDirection; function scrollFunc() { if (typeof scrollAction.x == 'undefined') { scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } var diffX = scrollAction.x - window.pageXOffset; var diffY = scrollAction.y - window.pageYOffset; if (diffX < 0) { // Scroll right scrollDirection = 'right'; } else if (diffX > 0) { // Scroll left scrollDirection = 'left'; } else if (diffY < 0) { // Scroll down scrollDirection = 'down'; } else if (diffY > 0) { // Scroll up scrollDirection = 'up'; } else { // First scroll event } scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; }
相关文章推荐
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- 用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
- Android项目:使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法,监听listview滚动方向
- 全屏滚动,微场景,H5全屏切换滚动页面制作的方法介绍
- iOS开发之UITableView , UICollectionView, UIScrollview,根据代理判断页面滚动方向。
- jQuery判断页面滚动条滚动方向
- Android项目:使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法,监听listview滚动方向 推荐
- js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件
- 监听页面滚动的事件
- JS实现判断滚动条滚到页面底部并执行事件的方法
- jQuery页面滚动监听事件及高级效果插件
- [Js]判断iframe内的页面是否滚动到底部触发事件
- 利用监听事件做一个判断是在x方向还有y方向上面的判断,判断在屏幕上滑动的趋势
- js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
- 用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
- 用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件) 详细出处参考:http://www.jb51.net/article/30640.htm
- JS实现判断滚动条滚到页面底部并执行事件的方法
- Android项目:使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法,监听listview滚动方向
- asp.net 一个页面中有两个按钮,回车时判断相应哪个事件的方法!!(用javascript 控制)
- RecyclerView实现滚动方向判断(上下监听)