Question

http://www.markthatred.com/当你进入我的工作部分并点击一个缩略图时，我有这个网站，灯箱会显示它工作正常但是如何使它在灯箱上不可滚动？

HTML

<!--  thumbnail image wrapped in a link  -->
<a href="#img1">
   <img alt="Eiffel Tower Web Design Mockup - Mark That RedWeb Design Mockup" class="works-feature-thumb" src="images/lightbox-1-t.jpg"/>
</a>
<!--  lightbox container hidden with CSS  -->
<a href="#_" class="lightbox" id="img1">
   <img alt="Law Attorney Web Design Mockup - Mark That Red Web Design Mockup Philippines" src="images/lightbox-1.jpg"/>
</a>

CSS

.lightbox {
    /** Default lightbox to hidden */
       display: none;

    /** Position and style */
      position: fixed;
       z-index: 999;
         width: 100%;
        height: 100%;
    text-align: center;
           top: 0;
          left: 0;
    background: rgba(0,0,0,0.8);
}

.lightbox img {
    /** Pad the lightbox image */
     max-width: 95%;
    max-height: 90%;
    margin-top: 2%;
}

.lightbox img:hover {
    opacity: 1;
}

.lightbox:target {
    /** Remove default browser outline */
    outline: none;

    /** Unhide lightbox **/
    display: block;
    overflow: hidden;
}

Answer 1

只要灯箱处于活动状态，您就可以向html元素添加overflow: hidden。我不知道你使用的是哪个灯箱，但可能有一些回调如“onOpen”和“onClose”：

Answer 2

如果您添加此脚本，它将起作用。

$(document).ready(function(){
    $(".works-feature").click(function(){
        $("body").css("overflow","hidden");
    });
    $(".lightbox").click(function(){
        $("body").css("overflow","auto");
    });
});

如何让我的灯箱不滚动？

2 个答案: