100%全屏Colorbox(jquery lightbox)卷轴不替换或覆盖基础层的卷轴

Question

在下面的段落中,我介绍了当我使用全屏灯箱时,两个滚动条彼此相邻的问题.基础层的滚动条(初始html)和iframe(灯箱)的滚动条.我想删除或覆盖基本滚动条.

在我的基页设计中,我有一个行的投资组合项目的垂直列表.该页面旨在滚动.要查看项目组合项目的图像,用户单击"查看项目图像"链接以展开扩展100%浏览器的灯箱.我们的想法是使用灯箱将投资组合图像置于浮动的全屏窗口中心,当您关闭窗口时,用户将返回到他们离开的位置下方的页面.这非常重要,因为下面的投资组合项目列表可能很长.Colorbox是一个基本的iframe.

如前所述,我有一个问题,两个滚动条彼此相邻.您可以在以下位置查看问题:

www.joshua-butler.com/sample/home.html

我想覆盖或删除基本滚动条.

这是一个类似的问题: jquery:当我在文档上添加图层时,如何重置文档滚动条？ (我无法弄清楚如何将此用于我的目的)

如果有人有更好的Colorbox解决方案,或者知道一个简单的修复,请告诉我.

所有灯箱解决方案,如Thickbox,Shadowbox和Lightbox都有这个问题.

提前致谢!玩笑

Answer 1

当ColorBox处于活动状态时,您可以使用ColorBox onLoad和onClosed回调将页面更改overflow为隐藏(删除页面滚动条).

$(".iframe").colorbox({
    iframe:true, 
    width:"100%", 
    height:"100%", 
    onLoad:function() {
        $('html, body').css('overflow', 'hidden'); // page scrollbars off
    }, 
    onClosed:function() {
        $('html, body').css('overflow', ''); // page scrollbars on
    }
});