0

我正在尝试复制 facebook 以灯箱类型格式显示图片的方式。我唯一无法复制的是他们实现让侧边栏没有实际滚动条的方式......

我想任何人看到这个的最好方法是去 facebook 拉一张图片，这样灯箱效果就会起作用。注意侧边栏。任何人有任何建议或方法来实现这一目标？有没有办法针对滚动条上的特定节点？

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

4

1 回答 1

2

老实说，这主要是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是，设置为scrollthis 意味着滚动条始终存在，无论它是否实际可滚动。

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

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

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

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

​</p>

于 2012-11-28T09:53:38.850 回答