各浏览器对document.body.onscroll,window.onscroll,document.documentElement.onscroll的兼容性

引入背景：

近期有个需要，浏览器滚到当前位置时显示动画效果，而页面又不是全屏滚动的，我用的是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

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()。

经过一系列调试，证明此方法可行。且都兼容。

因还没有上线，所以不能给大家上传项目查看了，看下图片吧。

以上仅是个人测试结果，如有异议，请指点，谢谢！