window 的 onload、onresize、onscroll 事件,跟其他的事件不一样,它不能用
attachEvent 或 addEventListener 来添加。

javascript scrollTop
获取滚动条相对于其顶部的偏移(如制作自动显示隐藏的“返回顶部”按钮)。在实际应用中经常会遇到以下问题:
document.documentElement.scrollTop在Chrome里总为0
document.body.scrollTop 在IE和firefox里总为0

对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:

也就是说,它只能这样来(以 onload 为例,下同):

1、各浏览器下
window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异
示例:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-1</title>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*执行错误*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

复制代码 代码如下:

复制代码 代码如下:

如果这样,还没有等待元素加载完就给 div#panel 绑定了一个事件,浏览器Console中会报错: TypeError:

window.onload = function()
{
// …
};

window.scroll(0,100)
console.log(“window.pageYOffset:”+window.pageYOffset)
console.log(“document.documentElement.scrollTop:”+document.documentElement.scrollTop)
console.log(“document.body.scrollTop:”+document.body.scrollTop)

document.getElementById(…) is
null

但这有个问题,就是想再为 onload 增加新的事件处理程序时,不能直接为
window.onload 赋值了,否则前面的赋值就会被覆盖了。

IE6/7/8:
doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:100
document.body.scrollTop:0

更改一下时机,下面三个程序都是可以成功绑定事件的,点击元素之后会弹出相应的alert().

可这样做

无doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:0
document.body.scrollTop:100
Safari/Chrome:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100

把事件绑定放在body里,元素之后:

复制代码 代码如下:

Firefox/Opera:

由于绑定事件在元素之后,所以可以成功获取 div#panel 的元素,并在
div#panel 上绑定点击事件。

var oldLoadHandler = window.onload;
window.onload = function()
{
if (oldLoadHandler)
{
oldLoadHandler();
}
newLoadHandler();
};

doctype:
window.pageYOffset:100
document.documentElement.scrollTop:100
document.body.scrollTop:0

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*正确执行*/
</script>
</body>
</html>

在 ezj 中,就更加方便了。

无doctype:
window.pageYOffset:100
document.documentElement.scrollTop:0
document.body.scrollTop:100

把事件绑定放在window.onload中进行事件绑定:

复制代码 代码如下:

2、获取scrollTop值 完美的获取scrollTop 赋值简写 :

window.onload
事件的处理函数则在页面所有元素加载完成之后才执行,所以这里给获取元素并绑定事件也是可行的。

$(window).ready(onloadHandler1);
$(window).ready(onloadHandler2);

复制代码 代码如下:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*正确执行*/
</script>
</body>
</html>
jQuery的ready()方法传入绑定事件的方法:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-3</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*正确执行*/
});
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

说明
我们一般接触的 onload 事件是 document.body.onload,但这实际上是由于 IE
的误导,正确的应该是 window.onload,window.onload 在 IE、Firefox、Chrome
中均有效。

var scrollTop = window.pageYOffset|| document.documentElement.scrollTop
|| document.body.scrollTop;

jQuery
$(document).ready()和window.onload

您可能感兴趣的文章:

  • JS中setTimeout的巧妙用法前端函数节流
  • 浅谈JavaScript函数节流
  • JavaScript函数节流概念与用法实例详解
  • JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
  • js隐藏与显示回到顶部按钮及window.onscroll事件应用
  • JS
    滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
  • javascript的offset、client、scroll使用方法详解
  • javascript
    scrollTop正解使用方法
  • JS中完美兼容各大浏览器的scrolltop方法
  • JavaScript触发onScroll事件的函数节流详解

您可能感兴趣的文章:

  • JS中setTimeout的巧妙用法前端函数节流
  • 浅谈JavaScript函数节流
  • JavaScript函数节流概念与用法实例详解
  • JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
  • js动态添加onload、onresize、onscroll事件(另类方法)
  • js隐藏与显示回到顶部按钮及window.onscroll事件应用
  • JS
    滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
  • javascript的offset、client、scroll使用方法详解
  • JS中完美兼容各大浏览器的scrolltop方法
  • JavaScript触发onScroll事件的函数节流详解

根据ready()方法的API说明

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注