changing body.style.overflowY or X programmatically

Issue

I'm trying to change the body overflowY to "hidden" through a JavaScript function. I've tried both of the following:

document.body.style['overflow-y'] = 'hidden';
document.body.style.overflowY = "hidden";

In both cases it didn't work. However in both cases using just overflow without X or Y works fine!

Is there a way to change only the overflowY or overflowX properties?

Solution

Both cases should work in all the current browsers. I've just tested Firefox 4, Chrome 11 and IE 9 and they all work fine. Either the browser you're testing with has a bug or your problem lies elsewhere in your code; for instance, a conflicting style declaration or erroneous code in the same block.

Working example: http://jsfiddle.net/4dq64/

Answered By - Andy E