google chrome adding unwanted margin on css change using jquery

Sup guys. I'm loading data into a table using ajax and jquery. This can be a lot, so I want to scroll this. I've put the table in a div. Now I've built a check in jquery like this:

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

This works quite nicely in firefox, but in google Chrome the div also receives an additional 15 margin-right. This seems to me like the width of a scrollbar, but is unwanted because the scrollbar is placed within the div, and not outside it. When I look at the div with the chrome development tools, the margin has no css origin. It doesn't show where it came from. I'm pretty sure this is something chrome is doing by itself, because I'm not doing anything with margins in my jquery code.

Is there something I'm doing wrong or is this just an chrome oddity? If so, what could I do to fix it? (Preferably without writing too much browser-dependant code) Or is there a more elegant way to handle this that doesn't h开发者_开发问答ave to deal with these problems?

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

Thanks!

Just use overflow-y: auto; max-height: [maxh]. This is what auto overflow is designed for. Show the scroll bars only when the content does not fit.