Question

我的网站上有一些灯箱，现在只有当我的指针在盒子里面时我才可以滚动它们。

如何在框外滚动它们，就像您在Trello或Pinterest上发表评论一样？

这是我的代码：

＆＃13;

        //Declare vars
var $lightboxAnchor = $("a.list_message");

//Lightbox
$(".overlay-background").hide();

//Lightbox functions from leistungen
$lightboxAnchor.click(function() {
  var $attr = $(this).attr("href").replace("#", "");
  console.log($attr);
  $('div[id=' + $attr + ']').show();
  $("body").addClass("noscroll");
});
$(".overlay-background").click(function() {
  console.log('alert');
  $(this).hide();
  $("body").removeClass("noscroll");
});

$(".close_lightbox").click(function() {
  console.log('alert');
  $(".overlay-background").hide();
  $("body").removeClass("noscroll");
});

＆＃13;

        .overlay-background {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height:100%;
        width: 100%;
        cursor: pointer;
        z-index: 1000; /* high z-index */
        background: #000; /* fallback */
        background: rgba(0,0,0,0.75);
    }

    .overlay-content 
    {
        display: block;
        background: #fff;
        padding: 1%;
        width: 70%;
        height:70%;
        position: absolute;
        top: 15%;
        left: 10%;
        margin: 0;
        cursor: default;
        z-index: 10001;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0,0,0,0.9);
    }

＆＃13;

   <div class="overlay-background">
<div class="overlay-content">
   <object type="text/html" data="https://en.wikipedia.org/wiki/Dentist" style="width: 100%; height: 100%;" </object>
</div>

</div>

＆＃13;

我把这个JSFiddle作为一个表示形式：jsfiddle.net/9mesun50正如你所看到的那样，只能在它内部滚动灯箱。如果我在灯箱外面有指针，我可以滚动它。

谢谢你的帮助！

如何在框外滚动灯箱？

0 个答案: