fancyBox v2：如何阻止Chrome中的背景滚动？ [英] fancyBox v2: How do I prevent background scrolling in Chrome?

问题描述

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

I'm using fancyBox v2.1.4. In Chrome it's allowing scrolling of the main page when the fancyBox is open.

我正在使用已锁定：true 但这似乎并没有解决问题。我还考虑使用 e.preventDefault 来禁用某些滚动功能作为另一种选择：

I'm utilizing the locked: true but that doesn't seem to solve the issue. I have also considered using e.preventDefault to disable certain scrolling abilities as another option:

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

这篇关于fancyBox v2：如何阻止Chrome中的背景滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！