I have a horizontally centered container with a navbar that hides and shows divs of varying length with js. Sometimes, if the content in the shown div is too long, showing the div will also show a scrollbar and cause the page to "jump" to the left in certain browsers. The CSS is just Bootstrap's basic scaffolding.Below is the gist of what's going on in the site. but you can see the problem in production here: http://dylanpatrickclark.com\[code\]<body> <script type="text/javascript"> $(document).ready(function(){ function setNavState(currentHash) { $('nav ul li').removeClass('active'); var selector = 'nav ul li a[href="' + currentHash + '"]'; $(selector).parent().addClass('active'); }; function hash() { var hash = window.location.hash; if (hash != ''){ $('.tabs div').hide(); $(hash).show(); } else { $('.tabs div').hide(); $('.tabs div#tab1').show(); hash = 'tab1' } setNavState(hash); }; hash(); $(window).bind('hashchange', function() { hash() }); });</script><h1>Hello, world!</h1><div class="container"> <div class="row"> <nav> <ul> <li> <a href="http://stackoverflow.com/questions/14553449/#tab1">Tab1</a> </li> <li> <a href="http://stackoverflow.com/questions/14553449/#tab2">Tab2</a> </li> </ul> </nav> </div></div><div class="row"> <div class="tabs"> <div class="tab-pane" id="tab1"> <p>Short</p> </div> <div class="tab-pane" id="tab2"> <p>Long</p> </div> </div></div></body>\[/code\]I have seen a lot of older answers to this question here, a lot of them suggest forcing the scrollbar to show, but I'd rather use js to insert padding to compensate for the scrollbar. I think facebook does something like this. I'm not really want to worried about IE support, as I am mostly focusing on finding a solution that I can understand with my rudimentary understanding of javascript.Can anyone explain simply how to best compensate for the appearance/disappearance of a scrollbar with javascript?Thank you so much!
