DHTMLLib - Scroll Control


		Home \| Community \| Developer's Paradise High-Tech Jobs \| User Groups \| Site Information

DHTMLLib Demos/ DHTMLLib Scroll Tricks
Up

Down

This is an enhanced version of our Scroll Tricks II technique. In the original technique we wrote custom browser detection. In this version, by using DHTMLLib we were able to implement page up and down buttons without performing any browser detection. Below is the source code for this example:


  function positionScrollers() {
      clientHeight = document.body.clientHeight
      clientWidth = document.body.clientWidth
      docTop = document.body.scrollTop
      docLeft = document.body.scrollLeft
      if (docTop!=0) {
        prevScroll.style.pixelTop = docTop
        prevScroll.style.pixelLeft = clientWidth - prevScroll.offsetWidth + docLeft
        prevScroll.style.visibility = "visible"
      } else
        prevScroll.style.visibility = "hidden"
      if (docTop + clientHeight < document.body.scrollHeight) {
        nextScroll.style.pixelTop = docTop + clientHeight - nextScroll.offsetHeight
        nextScroll.style.pixelLeft = clientWidth - nextScroll.offsetWidth + docLeft 
        nextScroll.style.visibility = "visible"
      } else
        nextScroll.style.visibility = "hidden"

  }

  function movePage(dir) {
    // Scroll the page down one screenful
    window.scrollBy(0,document.body.clientHeight * (dir ? -1 : 1))
  }

  function DoLoad() {
	setup()
	prevScroll = document.all.prevPage
	nextScroll = document.all.nextPage
	window.onresize = window.onscroll = positionScrollers
	positionScrollers()
        
  }
  var prevScroll,nextScroll

  window.onload = DoLoad

Once the script is included on the page, the up and down buttons. These buttons are standard HTML need to be created. These buttons are just HTML so they can be easily customized.

We create the up and down buttons in absolutely positioned tables. We use TABLEs so they automatically size to their contents providing a very accurate width and height. Remember, DIV elements on the otherhand, default in Internet Explorer to 100% wide and 100% tall if no size is specified.

To make it easy to change the style and appearance we used a global style sheet to define a scrollers class.

<STYLE>
.scrollers {position: absolute; 
            visibility: hidden; 
            background: lightgrey; 
            layer-background-color: lightgrey; 
            border: 1px black solid}
.scrollers A {text-decoration: none; 
              color: darkred}
</STYLE>

<TABLE ID="prevPage" CLASS="scrollers">
  <TR><TD>
    <A HREF="#" ONCLICK="movePage(true); return false">Up</A>
  </TD></TR>
</TABLE>
<TABLE ID="nextPage" CLASS="scrollers">
  <TR><TD>
    <A HREF="#" ONCLICK="movePage(false); return false">Down</A>
  </TD></TR>
</TABLE>

Macintosh Notes

This demonstration does not run on the Macintosh version of Internet Explorer. The Macintosh version of Internet Explorer does not support the scroll event and returns incorrect values for the scroll* properties.