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) 



 

 

 

 

 

你可能感兴趣的:(JavaScript)