| home / experts / dhtml / column62 |
|
Since all menu items are positioned elements, moving them one-by-one to achieve the scrolling effect is inefficient.
Therefore if scrolling is enabled, all menus have an additional element created that acts as the parent of all items. The menu element consequently has only one child element, which we call the scrollParent in the script. This new element has as its children elements all the item elements. When we need to achieve scrolling we simply move this single element up or down.
If an element's style.overflow property is set to "hidden" no contained elements can appear beyond the set width or height of the element. We see contained, child elements, through a "window" as it were. We move child elements within this window to scroll. This works as expected in DOM browsers.
NS6 expands its own scrollbars to represent all visible elements (as does IE5+.) However, NS6 makes no adjustment if these elements are partially hidden. Although an element's style.visibility property value indicates that it is visible on the screen, part or even all of it may be clipped by a parent element. So an element 5000 pixels high creates window scrollbars to reflect this height, even though the element is windowed in a shorter parent. A lot of white space is created in the bottom of the page. During menu scroll the system scrollbars will also move and resize. This is bad behavior and doesn't exist in IE5+.
NS4 element sizing is based on its own very elegant and very fast clip object/property (again see Column 2.) All contained elements are properly cut off, so all we need to do is move the scrollParent element.
We have also taken the opportunity to un-relatedly optimize the NS4 code a bit, by omitting several eval() calls.
Happy scrolling!
You will need to overwrite previous versions of the above files to upgrade to 4.2.
On the next page, the sample page included in the download.
Produced by Peter Belesis and
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
All Rights Reserved. Legal Notices.
Created: February 04, 2002
Revised: February 04, 2002
URL: http://www.webreference.com/dhtml/column62/6.html
