fancyBox v2：如何防止 Chrome 中的背景滚动？答案

【问题标题】：fancyBox v2: How do I prevent background scrolling in Chrome?fancyBox v2：如何防止 Chrome 中的背景滚动？
【发布时间】：2013-08-26 21:59:29
【问题描述】：

我正在使用 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
        }
    });
});

【问题讨论】：

[这个答案][1] 非常适合我 [1]：stackoverflow.com/a/21355151/1920434

标签： javascript jquery fancybox-2

【解决方案1】：

这段代码对我有用：

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

【讨论】：

这看起来对我来说效果很好。唯一的问题是，afterShow 还禁用了通过触摸“X”图标关闭 fancyBox 的功能。无论如何解决这个问题？

【解决方案2】：

对于您（以及我）的问题，我有一个可能的解决方案。在此之前，我可以在默认浏览器中滚动Android设备上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);
        }
    });
});

【讨论】：

【解决方案3】：

完美地为我工作：

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

【讨论】：

【解决方案4】：

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

【讨论】：

页面上肯定有一些元素影响了我的情况，这仍然不起作用，打开灯箱后我仍然可以在页面上向下滚动。
@absentx : jsfiddle 对你有用吗？否则，你能分享一个链接吗？ ...我敢打赌，您在 html 或 body 标签（或另一个完全操纵它们的插件）上有一些特定的 css 样式
是的，您的 jsfiddle 对我有用，但是当我使用它时，页面上的内容也不足以需要滚动，也许您可以添加更多段落，我们尝试这种方式?
对问题的有趣更新。如果光标在打开灯箱的页面的左半边，它不会滚动，但是如果将鼠标移动到页面的右侧，则使用鼠标滚轮时会发生滚动！

【解决方案5】：

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

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

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

通过重复 scroll 函数而不使用 e.preventDefault(); 来重置 afterClose

【讨论】：

【解决方案6】：

您可以使用scrollOutside 设置：

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

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

【讨论】：