在下面的段落中,我将介绍当我使用全屏灯箱时两个滚动条彼此相邻的问题。基础层(初始 html)的滚动条和 iframe(灯箱)的滚动条。我想删除或覆盖基本滚动条。
在我的基本页面设计中,我有一个按行排列的投资组合项目的垂直列表。该页面旨在滚动。要查看投资组合项目的图像,用户单击“查看项目图像”链接以展开可扩展 100% 浏览器的灯箱。这个想法是使用灯箱将投资组合图像集中在浮动全屏窗口中,当您关闭窗口时,用户将返回到下面的页面,即他们离开的位置。这非常重要,因为下面的投资组合项目列表可能很长。 Colorbox 是一个基本的 iframe。
如前所述,我遇到两个相邻滚动条的问题。您可以在以下位置查看问题:
www.joshua-butler.com/sample/home.html
我想覆盖或删除基本滚动条。
这是一个类似的问题:jquery:当我在文档上附加一层时,如何重置文档滚动条? https://stackoverflow.com/questions/7297211/jquery-how-can-i-reset-the-document-scrollbar-when-i-append-a-layer-over-the-do(我不知道如何使用它来达到我的目的)
如果有人对 Colorbox 有更好的解决方案,或者知道简单的修复方法,请告诉我。
所有的lightbox解决方案,例如Thickbox、Shadowbox和Lightbox都存在这个问题。
提前致谢!
乔什
你可以使用 ColorBox 的onLoad http://jacklmoore.com/colorbox/#setting-onload and onClosed http://jacklmoore.com/colorbox/#setting-onclosed回调以更改页面overflow http://www.w3.org/TR/CSS2/visufx.html#overflow当 ColorBox 处于活动状态时隐藏(删除页面滚动条)。
$(".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
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)