IE 瀏覽器提供了一個(gè) onscroll 事件用于捕捉頁(yè)面垂直和水平的滾動(dòng)，但在Netscape 卻沒有提供這樣的事件，它只有一個(gè)屬性指明了滾動(dòng)條當(dāng)前的位置。寫上一點(diǎn)的代碼我們也一樣可以給Netscape 加上和IE 差不多的onscroll 事件和屬性。在IE 里，響應(yīng)onscroll 事件僅僅是在BODY 標(biāo)簽加上一個(gè)onscroll 事件屬性這樣簡(jiǎn)單，當(dāng)然這個(gè)屬性值也可以是一個(gè)函數(shù)。
可以用第二種方法實(shí)現(xiàn)和onscroll 事件類似的功能，用自己的函數(shù)賦值一個(gè)特定事件。方法的思路是建立一個(gè)時(shí)間器不斷的檢測(cè)用戶是否滾動(dòng)了頁(yè)面，當(dāng)用戶滾動(dòng)頁(yè)面則調(diào)用那個(gè)我們賦值給了onscroll 函數(shù)。
????
function
?testScroll()?{
????
//
?程序剛開始時(shí)初始化滾動(dòng)條位置臨時(shí)變量
????
if
?(window._pageXOffset
==
null
)?{
????window._pageXOffset?
=
?window.pageXOffset
????window._pageYOffset?
=
?window.pageYOffset
????}
????
//
?實(shí)現(xiàn)和IE?類似的模塊
????document.body.scrollTop?
=
?window.pageYOffset
????document.body.scrollLeft?
=
?window.pageXOffset
????window.document.body.scrollHeight?
=
?document.height
????window.document.body.scrollWidth?
=
?document.width
????
//
?如果臨時(shí)變量不等于當(dāng)前值則調(diào)用onscroll?事件
????
if
?(((window.pageXOffset
!=
window._pageXOffset)?
||
????(window.pageYOffset
!=
window._pageYOffset))?
&&
?(window.onscroll))
????window.onscroll()
????
//
?設(shè)置臨時(shí)變量位置新值
????window._pageXOffset?
=
?window.pageXOffset
????window._pageYOffset?
=
?window.pageYOffset
????}
????
//
?建立為Netscape?兼容的代碼
????
if
?(document.layers)?{
????document.body?
=
?
new
?Object
????setInterval(
"
testScroll()
"
,
50
)
????}
????
//
?寫上自己onscroll?事件要做的事
????
function
?doScroll()?{
????
//
?do?something
????}
????window.onscroll?
=
?doScroll
除了一個(gè)兼容的onscroll 事件以外，這個(gè)函數(shù)還建立一個(gè)跨瀏覽器的滾動(dòng)屬性集框架。在IE ，滾動(dòng)條當(dāng)前的位置屬性通過document.body 的一個(gè)屬性而被提供。我們一樣可以加入類似IE 提供的滾動(dòng)條屬性集的功能給Netscape Navigator 。
????屬性?描述
????window.onscroll ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? Sets?or?returns?the?
function
?assigned?to?the?onscroll?event
????document.body.scrollTop
????document.body.scrollLeft???????????????? Returns?the?position?of?the?vertical?and?horizontal?scrollbars.
????document.body.scrollHeight
????document.body.scrollWidth ? ? ? ? ? ?? Returns?the?height?and?width?of?the?document
????document.body.clientHeight
????document.body.clientWidth ? ? ? ? ? ?? Returns?the?height?and?width?of?the?client?area?(the?currently?viewed?portion?of?the?document).
如果使用用代碼實(shí)現(xiàn)滾動(dòng)效果，則兩個(gè)瀏覽器都提供了一個(gè)互相兼容的方法：用window.scrollTo(x,y) 和 window.scrollBy(x,y) 滾動(dòng)頁(yè)面。