| home / experts / dhtml / column23 |    |
|
Ever since Navigator 4, beta 1, authors have been devising ways to scroll layers. The single-layer method, used in this column, was the first to appear and is still the only way to scroll a layer's content without resorting to a second layer. That is, the layer's top and clip.top are changed, while maintaining the clip.height.
If the scrolling layer is nested within a container, then only the layer's top needs to be adjusted, since the containing layer's clip values ensure that the same amount of content is always visible. I wrote such a technique for the now defunct netscapehelp.com site. Doc JavaScript has also developed techniques based on this second method.
Whichever method is used, authors usually place simple start/stop buttons to control the scroll. There is no way to know how much content remains hidden, or where you are positioned in the content. Only a full-featured scrollbar can do that.
Netscape published its own layer scrollbars script, written by Henri Torgemane. This script adds scrollbars to any layer specified, like next column's script will, for both horizontal and vertical scrolling, which we will not do (for now). There is no arrow mouseout-and-then-back-over scroll, and the elevator bar mousedown behavior is different from ours. The JavaScript used is very sophisticated, and many readers have written to ask, "How do they do that?" The only way to properly answer the question was to develop our own script from scratch; one that is easier to explain.
We are indebted to the Netscape article for the original idea and for some of the images used. Saved us some screen captures.
Our present column resorted to some hard-coding. As mentioned, this seemed necessary so that we could concentrate on the script routines and the scrollbar logic. In our next column, we will use the routines developed to expand our script into one that does not require any hard-coding and generates vertical scrollbars on-the-fly for any positioned element.
The complete code discussed is reproduced on the next page.
|
Produced by Peter Belesis and
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: Jan 12, 1999
Revised: Jan 12, 1999
URL: http://www.webreference.com/dhtml/column23/NSscrFinal.html
