2

我正在使用 fancyBox v2.1.4。在 Chrome 中，它允许在 fancyBox 打开时滚动主页。

我正在使用，locked: true但这似乎并不能解决问题。我还考虑过使用e.preventDefault禁用某些滚动功能作为另一种选择：

$(document).ready(function() {
    $('.fancybox').fancybox({
        'closeClick': false,
        'scrolling': 'no',

        helpers: {
            overlay: {
                closeClick: false,
                locked: true
            }
        },

        beforeShow: function() {
            // considering some type of functionality here to prevent default
            // of mousewheel
        },
        afterClose: function() {
            // restore default action of mousewheel, although my initial attempts
            // at this did not work
        }
    });
});
4

6 回答 6

4

这段代码对我有用：

<script type="text/javascript">
  $(document).ready(function() {
    $(".lightbox").fancybox({
      scrolling: "no",
      openEffect: "elastic",
      padding: 0,
      closeEffect: "elastic",
        afterShow: function(){
            document.ontouchstart = function(e){
                //prevent scrolling
                e.preventDefault();
            }
        },
        afterClose: function(){
            document.ontouchstart = function(e){
                //default scroll behaviour
            }
        },
      helpers: {
          overlay: {
              locked: true
          }
      }
    });
  });
</script>
于 2014-10-28T10:21:29.823 回答
2

我已经为您（以及我的）问题找到了可能的解决方案。在此之前，我可以在安卓设备的默认浏览器中滚动fancyBox后面的页面。有了这个小“黑客”，用户就不能再滚动背景页面了，但是由于浏览器捕获“滚动”事件的速度，它有点小故障。

更新：在计算机浏览器上，这个修复就像一个魅力。只有Android浏览器出现故障。

jQuery(document).ready(function($) {    
    var scrolltop, htmlOrBody;

    var antiscrollevent = function(e) {
        e.preventDefault();
        $(htmlOrBody).scrollTop(scrolltop);
    };

    // links met een popover
    $("a.popup").fancybox({
        type: 'ajax',

        beforeShow: function() {
            // considering some type of functionality here to prevent default of
            // mousewheel
            htmlOrBody = $('body').scrollTop() != 0 ? 'body' : 'html';
            scrolltop = $(htmlOrBody).scrollTop();
            $(window).on('scroll', antiscrollevent);
        },
        afterClose: function() {
            // restore default action of mousewheel, although my initial attempts
            // at this did not work
            $(window).off('scroll', antiscrollevent);
        }
    });
});
于 2013-10-24T19:07:59.410 回答
1

完美地为我工作：

$('.image').fancybox({
   helpers: {
      overlay: {
         locked: false
      }
   }
});
于 2016-06-15T05:19:15.997 回答
0

我尝试的许多事情最终都禁用了移动设备上的所有交互，使 FancyBox 无法关闭。

我最终scroll在afterShow. 这保留了与 FancyBox 内容的交互，同时禁用了正文的滚动。在 Android 浏览器和移动 Safari 上测试：

afterShow: function(){
            $(document).on('scroll','body',function(e){
                e.preventDefault();
            });
        }

afterClose通过重复该scroll功能将其重置为e.preventDefault();

于 2014-12-16T22:12:27.103 回答
0

这段代码在 Chrome 中对我来说很好（Windows 版本 29.0.1547.57 m）

$(document).ready(function () {
    $('.fancybox').fancybox({
        closeClick: false,
        scrolling: 'no',
        helpers: {
            overlay: {
                closeClick: false //,
                // locked: true // default behavior 
            }
        }
    });
});

请参阅JSFIDDLE（在 Chrome 中）

于 2013-08-27T00:25:35.570 回答
0

您可以使用以下scrollOutside设置：

.fancybox({
  scrolling: "no",
  scrollOutside: "false"
});

该scrolling设置阻止显示垂直滚动条。

于 2015-05-07T09:20:26.907 回答