I’m a big fan of the web-based media viewer application Shadowbox and use it where necessary. However in a recent project I noticed that the contents of the window over which the shadowbox overlay opens, remains scrollable using the mouse wheel.

I wanted to prevent this behaviour and as usual I performed a Google search. I found many questions on it, but no answers. So I looked into it myself and managed to come up with something that works and is quite easy really.

You simply take advantage of the onOpen and OnClose options within Shadowbox and assign a function to each of them:

Shadowbox.init({
   language: 'en',
   players: ['html', 'iframe'],
   modal: true,
   onOpen: onShOpen,
   onClose: onShClose
});
function onShOpen() {
    document.body.style.overflow = "hidden";
    return true;
}
function onShClose() {
    document.body.style.overflow = "auto";
    return true;
}

As you can see, when the shadowbox opens, the function onShOpen is called, and this sets the body overflow to be hidden, and thus non-scrollable. The function onShClose undoes this.

Simples!

Related posts:

1. Shadowbox and Internet Explorer 8
2. Dynamically changing the background image applied with the DD_belatedPNG IE6 script