DHTML的onScroll事件
IE 瀏覽器提供了一個 onscroll 事件用于捕捉頁面垂直和水平的滾動,但在Netscape 卻沒有提供這樣的事件,它只有一個屬性指明了滾動條當(dāng)前的位置。寫上一點的代碼我們也一樣可以給Netscape 加上和IE 差不多的onscroll 事件和屬性。在IE 里,響應(yīng)onscroll 事件僅僅是在BODY 標(biāo)簽加上一個onscroll 事件屬性這樣簡單,當(dāng)然這個屬性值也可以是一個函數(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
????}
???? // ?實現(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).
如果使用用代碼實現(xiàn)滾動效果,則兩個瀏覽器都提供了一個互相兼容的方法:用window.scrollTo(x,y) 和 window.scrollBy(x,y) 滾動頁面。
posted on 2007-03-25 02:32 ideame 閱讀(6046) 評論(0) 編輯 收藏 所屬分類: Script