how to hide scroll (overflow:hidden)?

Question

I have scrollable page with link which opens thickbox.

(see example landme.ru/scroll-bug/ )

I want to hide vertical scroll when thickbox is opened and stay on the bottom of the page. Applying 'overflow:hidden' property to 'body' tag does not work in ie7. If I use this property for 'html' tag, the page content is scrolled up before scroll will be hidden

sorry for my english

UPD: Meanwhile I use such code:

css:
.noscroll{overflow:hidden;}

js:

if ( ($.browser.msie) && ($.browser.version == '7.0')) {  
   $('html').addClass('noscroll');  
} else {  
   $('body').addClass('noscroll');  
}  

It works, but I still want to know, if there are any other methods

Answer 1

ok so the problem is with the height. You can't just specify overflow hidden on the wrap because it has no idea where to stop. Wrap the "wrap" in a div with the style attributes of position:relative; height:100%; then give the wrap the style of overflow: hidden; height: 100%; position: absolute;

lastly you need to scroll it so it's at the bottom.

document.getElementsByClassName("wrap")[0].scrollTop = document.getElementsByClassName("wrap")[0].scrollHeight

and there you have it:)

test case here: http://jsbin.com/eguhuj#html

there is a tiny bit of scroll bar, but that's because of jsbin. in just an html document it looks perfect.

EDIT: updateed code... can we test this to see if it works first... can you put this in your anchor element?

onclick="(function(){var blah = document.getElementsByClassName("wrap")[0];
document.getElementsByClassName("wr")[0].style.position = "absolute";
var meh = document.body.scrollTop;
blah.style.overflow = "hidden";
blah.style.height = "100%";
blah.style.position = "absolute";
blah.scrollTop = meh;})();"