需要在页面滚动时打开 fancybox 内容而不是点击某处

Question

我正在使用 fancybox。在这里，它 fancybox 将在点击某处时显示，但我需要在页面滚动后显示。现在我正在寻找 fancybox。任何人都可以向我推荐任何像 fancybox 这样滚动而不是点击的插件。

现在我已经尝试使用 fancybox，所以这里是 fancybox 的代码。但是你可以帮助我使用任何插件。

$(document).ready(function() {
  $(".fancybox").fancybox();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>


<a class="fancybox" id="single_1" href="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_b.jpg" title="Morning on Camaret (Tony N.)">
 <img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" />
</a>

Answer 1

继续使用 fancybox 插件的一种简单方法是触发对滚动图像的点击。

$(window).one('scroll', function(){
     $('img').trigger("click")
})

Answer 2

鼠标滚轮事件监听器取自：Get mouse wheel events in jQuery?

我还创建了一个 jsFiddle：https://jsfiddle.net/jmL7zgzt/

$(document).ready(function() {
  $(".fancybox").fancybox();
});
$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        // scroll up
    }
    else {
       // scroll up
           if (!$("html").hasClass("fancybox-enabled")) $('.fancybox').click()
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>


<a class="fancybox" id="single_1" href="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_b.jpg" title="Morning on Camaret (Tony N.)">
 <img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" />
</a>

需要在页面滚动时打开 fancybox 内容而不是点击某处

Need to open fancybox content on page scroll instead of click somewhere

html

javascript

css

jquery

fancybox