fancyBox v2:如何防止Chrome中的背景滚动

fancyBox v2: How do I prevent background scrolling in Chrome?

本文关键字：背景 滚动 Chrome 何防止 v2 fancyBox      更新时间：2023-09-26

我使用的是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
        }
    });
});

这段代码对我有用：

<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>

我有一个可能的解决方案来解决你（也是我）的问题。在此之前，我可以在默认浏览器中滚动Android设备上fancyBox后面的页面。有了这个小"黑客"，用户就不能再滚动背景页了，但由于浏览器捕捉"滚动"事件的速度太快，这有点小故障。

更新：在计算机浏览器上，此修复程序非常有效。只有安卓浏览器出现故障。

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);
        }
    });
});

非常适合我：

$('.image').fancybox({
   helpers: {
      overlay: {
         locked: false
      }
   }
});

此代码在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中）

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

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

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

通过在没有e.preventDefault(); 的情况下重复scroll功能，在afterClose上重置此值

您可以使用scrollOutside设置：

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

CCD_ 9设置防止垂直滚动条显示。

相关文章：