Google chrome adds unwanted margin when changing css using jquery

Question

Guys. I am loading data into a table using ajax and jquery. This can be a lot, so I want to scroll through it. I put the table in a div. Now I created a check in jquery as follows:

if($('div#result table').height() > maxHeight) $('div#result').css('overflow-y', 'scroll'); else $('div#result').css('overflow-y', 'hidden'); 

This works pretty well in firefox, but in google Chrome the div also gets an extra 15 margin-right. This seems to me to be the width of the scrollbar, but undesirable because the scrollbar is placed in a div, and not outside of it. When I look at a div using chrome development tools, margin has no css origin. He does not show where he is from. I'm sure this is what chrome does on its own, because I am not doing anything with fields in my jquery code.

Is there something I'm doing wrong, or is it just chrome oddity? If so, what can I do to fix this? (Preferably, do not write too much browser-specific code). Or is there a more elegant way to deal with this that should not deal with these problems?

Before you ask: I don't want to overflow-y on the scroll all the time, because it shows the scroll bar, even if all the content fits in the div.

Thanks!

Answer 1

Just use overflow-y: auto; max-height: [maxh] overflow-y: auto; max-height: [maxh] . This is what automatic overflow is for. Show scrollbars only if the content is inappropriate.