Question

I have a page which uses the jQuery Colorbox plugin. My JS for the page is:

<script type="text/javascript">
    $(document).ready(function(){

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

        $(".iframe").colorbox({innerWidth:780, innerHeight:"90%", iframe:true});
     });
</script>

The intent of the first two code pieces is to disable the vertical scroll bar on the parent page behind the colorbox when open. This works without issue. Additionally, when the colorbox is closed, the vertical bars should re-appear. The latter works in all browsers except IE 7.

I know it reaches the code without any errors in code for two reasons:

1 – testing an alert works within “$(document).bind(‘cbox_closed’, function() {“

2 – it works in every other browser and version of IE 8+.

I have changed the overflow value to “scroll” but this adds an unnecessary horizontal scroll to the page as well which is undesired.

Is there a different way to make overflow or vertical scroll appear in ie7 than listed?

Answer 1

In my experience, this won’t work in ie7 on the html or body elements. I recommend wrapping your entire document in a <div> and setting it to height:100% and width:100% and controlling overflow with that div instead. Additionally, (and this may be a matter of taste) you should be using removeAttr('style') on the element to return its state rather than changing the css to overflow:visible.

As a side note, this method resolves the issue for iPad as well, which suffers from the same scrolling problem as ie7