獲得滾動位置
網頁滾動是JavaScript最基本的一個屬性:不同的流覽器現在共有三種不同的方式。但是通過幾個細心的測試,我們可以獲得一致的值。
解決方法
有三種方法可以獲得這類資訊,每種方法我們都可以使用object test,判斷可用的支持水準:
這個功能可以根據需要而定,下面就是一個簡單的展示,使用window.onscroll事件處理器(event handler),可以獲得數位並且寫入標題欄:
滾動的問題
滾動不是最可靠的事件:在Konqueror或者Safari 1.0中可能不存在不可用的問題,或者當用戶在Firefox中使用滑鼠滾輪滾動的時候也是可用的。如果不可用,它可能會持續或者快速的不可用(正如在IE中一樣),如果你設置的相關代碼非常的複雜,那它可能會非常的緩慢,效率可能會非常的低。
如果你有困難,你可能會發現使用setInterval功能比使用onscroll事件處理器更好,setInterval允許你在一個可預見的間隔內調用這種功能,而不是對一個事件進行反應。
討論
這裏唯一複雜的就是IE 5識別documentElement.scrollTop屬性,但是它的值是0,所以我們必須檢查它的值並且看看屬性是否存在。
或者,我們可以不關心哪個流覽器使用哪個屬性,我們關心的就是我們的腳本如何通過相容性測試並且返回一個有用的值。每個流覽器使用的屬性列在下面供參考:
□ Firefox和其他的Mozilla流覽器,比如Safari,Konqueror以及Opera使用的是 window.pageYOffset
□ IE6使用Document.documentElement.scrollTop作為標準的模式
□ IE 5使用的是document.body.scrollTop,IE 6使用的是“Quirks”模式
這個列表並沒有複雜的表述,這個列表只是簡單的描述測試的順序。更多的最新的Mozilla流覽器(比如Firefox)也支持documentElement.scrollTop以及body.scriooTop,Safari和Konqueror支持body.scrollTop兩種模式,Opera支援三種模式中的任何一種。
但是你並不需要知道這些,流覽器賣主們增加這些屬性是為了允許那些對property或者其他內容沒有察覺的腳本,而不是為了提供一種強制的選擇。從我們的前途來看,重要的局勢確定一套相容性的測試,保證我們的腳本盡可能廣泛的起效。
Rendering Modes
“Standards”模式和“Quirks”模式是現在流覽器使用的兩個主要的rendering模式,這些模式影響各種各樣的輸出文檔,包括哪個元素師canvas(<body>或者<html>),以及如何CSS box模型大小計算。
推薦給同仁
您想要瞭解更多的免費小竅門以便提升你的網站排名嗎?
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com