JavaScript滚轮实现动态加载页面

关键技术

• 滑轮滚动事件
• 获取元素距离浏览器顶部的距离
• 元素的添加

滑轮滚动事件

Firefox

if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}

IE/Opera/Chrome/Safari

window.onmousewheel=document.onmousewheel=scrollFunc;

其中scrollFunc是具体的实现函数

获取元素距离浏览器顶部的距离

var oTop = element.offsetTop;// body内元素距离body顶部的距离
var sTop = document.body.scrollTop; // body被卷上去隐藏的部分的高度
var top = oTop - sTop; // 二者相减就等于body内的元素距离浏览器窗口的距离

元素的添加

document.body.appendChild(...);

源码可参见：github源码

编程时查阅的文章：
http://www.cnblogs.com/xxcanghai/p/5015712.html