[Javascript] Re: scrollbars

Fri Apr 1 12:52:34 CST 2005

Dash <forgetful54341087097153001984 at hotmail.com> wrote:

> ok, i modified the script to make it work. In the body tag of the page,
> i've defined style="overflow:hidden;", so surely i dont need to check
> for document.documentElement (if it's defined in the html file in the
> body tag, it wouldn't shift anywhere else, would it?). 

document.documentElement actually refers to the root <html> element - 
you would need to put the style in <html> as well to have the same 
effect as the script version. The issue is that IE6/Standards makes the 
<html> element represent the viewport, whilst IE5 and IE6/Quirks makes 
the <body> element represent the viewport. The style has to be applied 
to the correct element (or both) to make the vertical scrollbar go away 
in IE/Win.

Other browsers (correctly according to spec) don't have an element to 
represent the viewport; instead the viewport is 'above' the root element 
(<html>) and can't be touched with CSS, though since it only displays a 
scrollbar when there's too much vertical content to fit on-screen this 
isn't generally a problem.

To actually get rid of 'necessary' scrollbars in all browsers is harder 
than just fixing IE/Win's unnecessary ones. You'd need to set a block to 
"overflow: hidden" *and* ensure that its height was the same as the 
viewport, which is trickier than it sounds: there is no reliable 
standards-compliant cross-browser-compatible way to give an element 
'height: 100%' of the viewport. You can do it for many browsers (not 
IE/Win) in a standards-compliant way using 'position: fixed; height: 
100%', and for many browsers (not IE/Mac) in a 
not-quite-standards-compliant way using 'position: absolute; height: 
100%'. Any way you slice it you'll end up with browser hacks.

Alternatively if you know the height of the content (eg. it's images or 
unwrapped fixed-size text) you could simply put the lot in a <div> with 
hidden overflow and a fixed-size height.

> I want to be able to do this because i dont want the user to be able to
> scroll down the page until an event occurs.

Overflow is probably not a good mechanism for doing this. Some browsers 
would still let you access the hidden content (possibly accidentally) 
through keyboard control, for example. Not to mention very large screen 
resolutions. Any reason you couldn't just use a simple hidden <div> that 
gets displayed when the event occurs?

-- 
Andrew Clover
mailto:and at doxdesk.com
http://www.doxdesk.com/