Question

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

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

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

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

我想要覆盖或移除基本滚动条。

这是一个类似的问题： jquery: How can I reset the document scrollbar when I append a layer over the document? （我无法弄清楚如何将其用于我的目的）

如果有人有更好的Colorbox解决方案，或者知道一个简单的解决方法，请告诉我。

所有灯箱解决方案，例如Thickbox，Shadowbox＆amp;灯箱都有这个问题。

提前致谢！约什

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
    }
});

100％全屏Colorbox（jquery lightbox）卷轴不替换或覆盖基础层的卷轴

1 个答案: