Jquery Colorbox scrolls whole window not just content inside colorbox

Im using Jquery Colorbox to show information in the colorbox popup.

I have iframe turned on so when the new colorbox opens up if there is more content than the height of the colorbox the window in the colorbox popup scrolls.

The issue is if I continue to scroll to the end of the window in the colorbox using my scroll button on my mouse and continu开发者_开发知识库e to scroll the whole window, not just the window in the pop up, will scroll down.

Is there a way to prevent this? Hopefully this makes sense.

One way to do this is by setting the document overflow to hidden when the ColorBox dialog is opened and then reverting when it closes. You can bind to the custom jQuery events that ColorBox uses:

$(document).bind('cbox_open', function () {
    $('html').css({ overflow: 'hidden' });
}).bind('cbox_closed', function () {
    $('html').css({ overflow: 'auto' });
}); 

There is a small jump when the scrollbar on the parent window disappears and reappears. It bothered me so I used the mousewheel method as described in this SO question: Prevent scrolling of parent element?

My use is a little complicated because I'm using an iframe inside ColorBox and explicitly setting the scrollbar. I ran a script inside the iframe page, bound to the mousewheel event, and stopped propagation at the bottom of the element. For simple ColorBox uses, you should be able to create a reusable solution by binding the mousewheel event to the scrollable element in the ColorBox frame.

If I'm understanding correctly, I believe I'm experiencing the same/similar problem with colorbox atm. I found this solution that worked for me in an opened issue over at GitHub posted by senechaux.

I'm posting this alternative solution for any future visitors that may experience the same problem. This can be dumped anywhere in the script.

$(document).on('cbox_open',function(){
  $(document.body).css('position','fixed');
}).on('cbox_closed',function(){
  $(document.body).css('position','');
});

You can also add the next events to the Colorbox initial to disable scrolling on the main document while Colorbox is open:

jQuery('.selector').colorbox({
    onOpen: function(){
        $('body').css({ overflow: 'hidden' });
    },
    onClosed: function(){
        $('body').css({ overflow: '' });
    }
});

Source: http://www.jacklmoore.com/colorbox/faq/#faq-scrolling

Note: do not use overflow: 'auto' if you like that the overflow will back to it preview value when Colorbox is closed, use overflow: '' instead.

If you want only the colorbox to scroll and not the window itself, you can do

$(window).scroll(function() {
    $(this).scrollTop(0)
}) 

You can modify this further to fit your needs.

Check working example at http://jsfiddle.net/vQHDJ/