SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Scroll Control
By Scott Isaacs

Internet Explorer exposes an onscroll event that occurs whenever the page is horizontally or vertically scrolled. Netscape Navigator does not expose any scroll events, but does expose properties representing the scrollbar's current position. With a little creative scripting we are able to add an Internet Explorer compatible onscroll event and properties to Netscape.

In Internet Explorer, responding to the onscroll event is as simple as specifying the onscroll event handler attribute on the BODY tag or assigning a function to it through script: 

<BODY ONSCROLL="doScroll()">

...or...

<SCRIPT>
  function doScroll() {
    // do something
  }

  window.onscroll = doScroll;
</SCRIPT>

We are able to expose a compatible onscroll event for the second method, assigning an event handler through script. The trick behind this technique is to create a timer that continually checks whether the user has scrolled the page. When the user scrolls the page we call the function assigned to the onscroll property. 

  function testScroll() {
    // Initialize scrollbar cache if necessary
    if (window._pageXOffset==null) {
      window._pageXOffset = window.pageXOffset
      window._pageYOffset = window.pageYOffset
    }
    // Expose Internet Explorer compatible object model
    document.body.scrollTop = window.pageYOffset
    document.body.scrollLeft = window.pageXOffset
    window.document.body.scrollHeight = document.height
    window.document.body.scrollWidth = document.width    

    // If cache!=current values, call the onscroll event
    if (((window.pageXOffset!=window._pageXOffset) || 
      (window.pageYOffset!=window._pageYOffset)) && (window.onscroll)) 
        window.onscroll()
    // Cache new values
    window._pageXOffset = window.pageXOffset
    window._pageYOffset = window.pageYOffset
  }

  // Create compatibility layer for Netscape
  if (document.layers) {
    document.body = new Object
    setInterval("testScroll()",50)
  }


  // End of Compatibility layer 
  // Just write your onscroll event

  function doScroll() {
    // do something
  }

  window.onscroll = doScroll

In addition to exposing a compatible onscroll event, this function creates a cross-browser compatible set of scroll properties. In Internet Explorer, the current scrollbar positioned are exposed as properties of the document's body object. We add a similar object to Netscape Navigator with the same set of scrollbar properties exposed by Internet Explorer:
PropertyDescription
window.onscrollSets 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).

To scroll the page through script, both browsers already expose a compatible object model. Use the window.scrollTo(x,y) and window.scrollBy(x,y) methods to scroll the page through script.

Discuss and Rate this Article

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.