Question

我有一个html文件

<html>
<body>
<div #main> <a click to open lightbox> <img> <more images> </a> </div>
</body>
</html>

当灯箱打开时，这就变成了

 <html>
    <body>
    <div id="main"> <a click to open lightbox> <img> <more images> </a> </div>
    <div id="pic_holder">...Popup div content </div>
    <div id="overlay"></div>
    </body>
    </html>

我希望#main成为noscroll。我读到了overflow：hidden，和position：static;等我的css .noscroll{}。

问题是，如果我使用overflow：隐藏在#main上用于noscroll，body仍会滚动。如果我在#main上使用position：static，弹出窗口关闭后，＃body滚动到顶部。这个想法是为了获得像行为一样的刺激，我正在使用prettyphoto。

欣赏任何提示。与Preventing div scrolling back to top when changing position to fixed有点相关，但它没有谈到添加灯箱。那就是问题所在。

Answer 1

我需要代码以获得更好的答案，这里有一些提示

您是否尝试过将您的身体设置为“溢出：隐藏”？
滚动取决于您正在悬停的元素，您是否尝试将#main大小设置为窗口大小？

拜

[更新]

在我看到你的网站后，我认为你应该做一些改变。

制作“pp_overlay”的“pp_pic_holder”子项。
将您的“pp_pic_holder”放在css中，而不是修复，请使用“margin：0 auto;”

在Jquery中，在窗口上使用“resize”功能将“pp_overlay”的宽度/高度设置为窗口1。它看起来应该是这样的。

function overlayResize(){
   var WW=$(window).width();
   var WH=$(window).height();
   $(".overlay").height(WH).width(WW);
}


$(window).resize(function(){
    overlayResize();
})

overlayResize();

这里有一些jsFiddle：

http://jsfiddle.net/kirkas/PSjTD/

[更新] 如果您想在叠加层中滚动，请不要忘记添加：

    overflow:auto;

到你的叠加层。

http://jsfiddle.net/kirkas/PSjTD/

[更新]

当您单击选定的图片时，此选项会生成停止隐藏功能。

http://jsfiddle.net/kirkas/PSjTD/

将div更改为固定和返回灯箱

1 个答案: