Question

我试图以灯箱类型格式复制facebook显示图片的方式。我在复制方面遇到的唯一问题就是他们离开侧栏时没有实际滚动条的方式......

我想任何人看到这个的最佳方式是去facebook拍照，这样灯箱效果就好了。注意侧边栏。有人有任何建议或方法来实现这一目标吗？有没有办法在滚动条上定位特定节点？

感谢。 jQuery是这个项目的首选库。

Answer 1

这主要是CSS，说实话。

看看这个小提琴：http://jsfiddle.net/ktd29/11/

我模仿Facebook所做的创造了世界上最差的灯箱。红色方块表示图片，黑色表示半透明叠加。

你会注意到主体是可滚动的，直到你点击滚动条被禁用的链接为止。

半透明覆盖层是绝对定位的div，宽度和高度均为100％

div {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.7);
    overflow-y: scroll;
    display: none;
}

关于此div的最后要注意的是overflow-y设置为scroll这意味着无论滚动条是否实际可滚动，都会始终存在滚动条。

文档的高度设置为非常大的值，这样当您不看灯箱时页面就可以滚动。以下是调用灯箱的代码：

jQuery(document).ready(function($) {
    $('a').click(function(){
        $('div').addClass('shown');
        $('html').addClass('noScroll');
    });
});

这是你所期望的。我正在应用一个显示的类，在此示例中只是display: block;，但请注意应用于HTML的noScroll类。这将overflow-y: hidden;应用于删除原始滚动条的html。这会停止有两个滚动条（一个用于html，一个用于叠加div）。

如果您需要我澄清任何事情，请告诉我。

保持侧边栏但删除滚动JavaScript？

1 个答案: