IE 瀏覽器提供了一個 onscroll 事件用于捕捉頁面垂直和水平的滾動,但在Netscape 卻沒有提供這樣的事件,它只有一個屬性指明了滾動條當(dāng)前的位置。寫上一點(diǎn)的代碼我們也一樣可以給Netscape 加上和IE 差不多的onscroll 事件和屬性。在IE 里,響應(yīng)onscroll 事件僅僅是在BODY 標(biāo)簽加上一個onscroll 事件屬性這樣簡單,當(dāng)然這個屬性值也可以是一個函數(shù)。
可以用第二種方法實(shí)現(xiàn)和onscroll 事件類似的功能,用自己的函數(shù)賦值一個特定事件。方法的思路是建立一個時間器不斷的檢測用戶是否滾動了頁面,當(dāng)用戶滾動頁面則調(diào)用那個我們賦值給了onscroll 函數(shù)。
????
function
?testScroll()?{
????
//
?程序剛開始時初始化滾動條位置臨時變量
????
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
????
//
?如果臨時變量不等于當(dāng)前值則調(diào)用onscroll?事件
????
if
?(((window.pageXOffset
!=
window._pageXOffset)?
||
????(window.pageYOffset
!=
window._pageYOffset))?
&&
?(window.onscroll))
????window.onscroll()
????
//
?設(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
除了一個兼容的onscroll 事件以外,這個函數(shù)還建立一個跨瀏覽器的滾動屬性集框架。在IE ,滾動條當(dāng)前的位置屬性通過document.body 的一個屬性而被提供。我們一樣可以加入類似IE 提供的滾動條屬性集的功能給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)滾動效果,則兩個瀏覽器都提供了一個互相兼容的方法:用window.scrollTo(x,y) 和 window.scrollBy(x,y) 滾動頁面。