DHTML的onScroll事件

IE 浏览器提供了一个 onscroll 事件用于捕捉页面垂直和水平的滚动，但在Netscape 却没有提供这样的事件，它只有一个属性指明了滚动条当前的位置。写上一点的代码我们也一样可以给Netscape 加上和IE 差不多的onscroll 事件和属性。在IE 里，响应onscroll 事件仅仅是在BODY 标签加上一个onscroll 事件属性这样简单，当然这个属性值也可以是一个函数。

可以用第二种方法实现和onscroll 事件类似的功能，用自己的函数赋值一个特定事件。方法的思路是建立一个时间器不断的检测用户是否滚动了页面，当用户滚动页面则调用那个我们赋值给了onscroll 函数。

     function  testScroll() {

     //  程序刚开始时初始化滚动条位置临时变量
     if  (window._pageXOffset == null ) {
    window._pageXOffset  =  window.pageXOffset
    window._pageYOffset  =  window.pageYOffset
    }

     //  实现和IE 类似的模块
    document.body.scrollTop  =  window.pageYOffset
    document.body.scrollLeft  =  window.pageXOffset
    window.document.body.scrollHeight  =  document.height
    window.document.body.scrollWidth  =  document.width

     //  如果临时变量不等于当前值则调用onscroll 事件
     if  (((window.pageXOffset != window._pageXOffset)  ||
    (window.pageYOffset != window._pageYOffset))  &&  (window.onscroll))
    window.onscroll()
     //  设置临时变量位置新值
    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 事件以外，这个函数还建立一个跨浏览器的滚动属性集框架。在IE ，滚动条当前的位置属性通过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).

如果使用用代码实现滚动效果，则两个浏览器都提供了一个互相兼容的方法：用window.scrollTo(x,y) 和 window.scrollBy(x,y) 滚动页面。