overflow:hidden to auto make extra space. how to prevent this?

Question

I am working with css.

originally my div has overflow: hidden as a part of its style.

I added an extra event which is if the mouse comes in, toggle hidden to auto so people can scroll.

However, when scroll bar occurs in the div, it makes extra space. (just like scroll bar width like)

So it ruins all of styles of the page.

How could I prevent this without functional changes.(toggling between hidden and auto)

Thanks for help.

=========== Edit

Thanks for answers.

This is code lit as you requested.

I changed state like this.

        $('.tbodycontainer').mouseover(function(){
//          $(this).css('overflow-y', 'auto');
            $(this).css('overflow-y', 'scroll');
            $('body').css('overflow-y', 'hidden');
        }).mouseout(function(){
            $(this).css('overflow-y', 'hidden');  
            $('body').css('overflow-y', 'scroll');  
//          $('body').css('overflow-y', 'auto');        
        });

and basic CSS as default is like ...

<style>
    .tbodycontainer {
        max-height: 300px;
        overflow-y: hidden; 
    }
</style>

Now, I will try what kalisha says and edit again :)

-- I have tried to hide scrollbar. by width: 102%, since padding : 15px seems little bit strange to me.

The page I working on has little list in it. And page scroll appear in whole page, but not in table ? this looks little bit weird, no offence.

In addition, since This page uses Bootstrap UI, I have responsive web issues.

I looking for an answer which meets conditions below. - supporting responsive. - need to show scroll bar, but it should appear inside of table. (it should not extend table area) - should not conflict with bootstrap basic UI.

Thanks~