Fancybox removing scroll, shifts page

When I click on a link that loads a Fancybox the whole background page shifts to the right do to fancy box removing the scroll bar. I have tried adding this JS as suggested in other forums but no luck. A link is below (click on a brand title), not sure why it would remove the scroll bar.

I load the object like

<div class="fancybox-hidden" style="display:none;">
                          <div id="post-<?php the_ID(); ?>" class="brand_list" style="width:800px !important;">
                            <h2>The Beers</h2>
                            <div class="beers">
                                <?php the_content(); ?>
                                <div class="clear"></div>
                            </div>
                          </div>
                        </div>

The Fix I tried

 <script type="text/javascript">
        $(".fancybox").fancybox({
        helpers: {
            title: {
                type: 'outside'
            },
            overlay: {
                locked: false
            }
        }
        }); 
        </script>

The Issue

Solution

The scrollbar is being removed because jquery.fancybox.pack.js is adding the property overflow: hidden; to the <body> element via the class .fancybox-lock whenever a fancybox is displayed. There are several ways you can handle this.

1) Modify the javascript in jquery.fancybox.pack.js to not add this class to the body element when a fancybox is displayed.
2) Modify the css in jquery.fancybox.css (line 169) to not add the overflow: hidden; property for the .fancybox-lock selector.
3) In one of your own css files, and the !important declaration to the overflow property on the body to override the fancybox css (i.e. body { overflow: auto !important; }).
4) Add the overflow: auto; as an inline style directly on the <body> tag.