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?
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.
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.
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With