javascript跟随滚动条滚动,onscroll事件的学习
今天研究了一下,滚动条事件,也是在无忧上看到的,顺便做下记录@
比如做一个浮动广告效果,原理就是 设置一个定时器0.1秒检测层所在的位置 并将他指定到 相当于窗口的位置.
核心代码如下:
代码
<script type="text/javascript">
function scrollImg(){
var posX,posY;
if (window.innerHeight) { //兼容判断
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) { //兼容判断
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
}
else if (document.body) { //兼容判断
posX = document.body.scrollLeft;
posY = document.body.scrollTop;
}
var ad=document.getElementById("ad");
ad.style.top=(posY+100)+"px";
ad.style.left=(posX+50)+"px";
setTimeout("scrollImg()",100);
}
</script>
重点,也是常犯错误的地方:
在xhtml页面中，document.body.scrollTop始终为0，即该属性无效，因此必须用其他的属性来判断，为兼容新旧标准，应该对属性的可用性进行判断。
应用WEB标准会使ScrollTop属性失效！！！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 加上这段后，document.body.scrollTop永远等于0 body onscroll = "alert(document.body.scrollTop);"永远也不会引发。
解决办法：使用：
document.documentElement.scrollTop
下面有2个例子
示例一：
var scrollPos;
if (typeof window.pageYOffset != 'undefined') { //netscape
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
alert(scrollPos);
示例二：
function WebForm_GetScrollX()
{
if (__nonMSDOMBrowser)
{
return window.pageXOffset;
}
else
{
if (document.documentElement && document.documentElement.scrollLeft)
{
return document.documentElement.scrollLeft;
}
else if (document.body)
{
return document.body.scrollLeft;
}
}
return 0;
}
@@@@@@
pageYOffset是netscape的
document.body.scrollTop和document.documentElement.scrollTop是ie的，但我不知道他们的真正区别，
只知道documentElement.scrollTop是xhtml兼容的（作者用的是strict）
