Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

changing body.style.overflowY or X programmatically

Tags:

javascript

css

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?

like image 368
Phil Avatar asked May 19 '11 13:05

Phil


People also ask

What does overflow-X do in CSS?

The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.

How do I fix the overflow in CSS?

To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.

What is overflow auto in CSS?

The auto value is similar to scroll , but it adds scrollbars only when necessary: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

What is overflow property in HTML?

The overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. Note: The overflow property only works for block elements with a specified height.


1 Answers

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/

like image 193
Andy E Avatar answered Sep 20 '22 14:09

Andy E