各浏览器对document.body.onscroll,window.onscroll,document.documentElement.onscroll的兼容性
2016-04-14 17:09
393 查看
引入背景:
近期有个需要,浏览器滚到当前位置时显示动画效果,而页面又不是全屏滚动的,我用的是window.onscroll事件监控浏览器的滚动情况。
每当滑到当前位置时,这些光鲜艳丽的小图标开始随机跳动,并且不重复,播放完当前图片后1s后隐藏并播放下一个,并逐一隐藏,等播放一轮时,最后一个也不在页面上显示。
就这样重复播放。
刚开始用的是document.body.onscroll事件,但在Mac上有时不显示动画效果,window上可以。
于是就各种百度,最后查着一篇2010年的文章。都6年了肯定浏览器有升级,接下来就将我自己测试后的表达下吧,仅个人测试结果。
无疑的是document.body.onscroll, window.onscroll, document.documentElement.onscroll各浏览器兼容性都存在差异
探讨问题:
各浏览器对下边3个事件的兼容性:
document.body.onscroll, window.onscroll, document.documentElement.onscroll
开始讨论:
1.各浏览器兼容表
2.关于window.onscroll,div对象事件
如上图可知浏览器对window.onscroll事件全部支持
3.关于document.body.onscroll事件
document.body.onscroll = function() {};
经测试在safari上不支持此事件,里边的代码不能执行。
编写思路:
1. 将这些小动画放入数组中并动态传入页面显示,体添加setInterval(); 事件执行循环。
2. 添加window.onscroll事件,因考虑到各浏览器兼容性,需要判断多个滚动方法,
var winScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (winScroll > 2300 && winScroll < 3500) { ... ...} 监听页面的滚动高度,这个范围是当前div基于页面的高度;
3. 每执行window.onscroll事件时都对将当前已播放完的div清除,也需要将setInterval()计时器清0,使用clearInterval();
4. 判断如果是当前滚动范围初始化随机播放图片的方法,else的话clearInterval()。
经过一系列调试,证明此方法可行。且都兼容。
因还没有上线,所以不能给大家上传项目查看了,看下图片吧。
以上仅是个人测试结果,如有异议,请指点,谢谢!
近期有个需要,浏览器滚到当前位置时显示动画效果,而页面又不是全屏滚动的,我用的是window.onscroll事件监控浏览器的滚动情况。
每当滑到当前位置时,这些光鲜艳丽的小图标开始随机跳动,并且不重复,播放完当前图片后1s后隐藏并播放下一个,并逐一隐藏,等播放一轮时,最后一个也不在页面上显示。
就这样重复播放。
刚开始用的是document.body.onscroll事件,但在Mac上有时不显示动画效果,window上可以。
于是就各种百度,最后查着一篇2010年的文章。都6年了肯定浏览器有升级,接下来就将我自己测试后的表达下吧,仅个人测试结果。
无疑的是document.body.onscroll, window.onscroll, document.documentElement.onscroll各浏览器兼容性都存在差异
探讨问题:
各浏览器对下边3个事件的兼容性:
document.body.onscroll, window.onscroll, document.documentElement.onscroll
开始讨论:
1.各浏览器兼容表
IE6 | IE7 | IE8 | Firfox | Chrome | Safari | Opera | ||||||||
Q | S | Q | S | Q | S | Q | S | Q | S | Q | S | Q | S | |
window 对象 | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
div 对象 | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
document 对象 | N | N | N | N | N | N | Y | Y | Y | Y | Y | Y | N | N |
document.body 对象 | Y | N | Y | Y | Y | N | N | N | N | N | N | N | Y | Y |
document.documentElement 对象 | N | Y | N | Y | N | Y | N | N | N | N | N | N | N | N |
如上图可知浏览器对window.onscroll事件全部支持
3.关于document.body.onscroll事件
document.body.onscroll = function() {};
经测试在safari上不支持此事件,里边的代码不能执行。
编写思路:
1. 将这些小动画放入数组中并动态传入页面显示,体添加setInterval(); 事件执行循环。
2. 添加window.onscroll事件,因考虑到各浏览器兼容性,需要判断多个滚动方法,
var winScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (winScroll > 2300 && winScroll < 3500) { ... ...} 监听页面的滚动高度,这个范围是当前div基于页面的高度;
3. 每执行window.onscroll事件时都对将当前已播放完的div清除,也需要将setInterval()计时器清0,使用clearInterval();
4. 判断如果是当前滚动范围初始化随机播放图片的方法,else的话clearInterval()。
经过一系列调试,证明此方法可行。且都兼容。
因还没有上线,所以不能给大家上传项目查看了,看下图片吧。
以上仅是个人测试结果,如有异议,请指点,谢谢!