JavaScript滚轮实现动态加载页面

来源:互联网 发布:ins图片下载软件 编辑:程序博客网 时间:2024/05/16 19:10

关键技术

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

滑轮滚动事件

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

0 0