如何防止Fancybox-2弹出窗口后页面滚动

Question

我们正在使用fancybox2来显示图片。一切工作都很顺利，但当在fancybox中显示较大的图像时，页面会滚动到顶部。关闭fancybox后，用户必须向下滚动到他打开盒子的位置。fancybox2网站上的示例没有显示这种行为。我无法找出造成这种情况的不同之处。

fancyOptions = {
  type: 'image',
  closeBtn: false,
  autoSize: false,
  scrolling: 'no',
  type: 'image',
  padding: [10,10,10,10],  
  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  },
  helpers: {
    overlay: {
      css: {
        'background': 'rgba(0, 0, 0, 0.7)'
      },
    },
    title: {
      type: 'inside'
    }
  }
};

我们正在使用fancybox2作为require.js中的一个模块。 .fancybox()函数调用位于$(document).ready()块中。

页面上存在两个滚动条，我使用CSS隐藏了其中一个。

.fancybox-overlay {
overflow: hidden !important;
}

- tomsteg

---

隐藏滚动条的工作解决方案：https://dev59.com/tHE95IYBdhLWcg3wi-Yc#13424120 - user216084

Answer 1

显然，当展示一张图片时，Fancybox会改变 body 元素上的CSS属性overflow为hidden。这将导致背景滚动回到顶部。你只需要在样式表jquery.fancybox.css中注释掉部分.fancybox-lock中含有overflow: hidden !important;的行即可。

请参见fancybox2 / fancybox causes page to to jump to the top。

- fast-reflexes

---

这对我有用 - 现在主体保持滚动位置，但被锁定，以防在模态弹出窗口中滚动时出现双重滚动。很好，那就是快速反应。 :) - kasperwf

谢谢。 我...我爱你。 - Leng

Answer 2

这对我来说运行良好：

在fancybox初始化中添加跟随功能。

beforeShow: function(){
    $("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
    $("body").css({'overflow-y':'visible'});
}

例子：

$(".fancyBoxTrigger").fancybox({
    maxWidth    : 820,
    maxHeight   : 670,
    fitToView   : false,
    width       : 760,
    height      : 580,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    padding     : 10,
    closeBtn    : false,
    beforeShow: function(){
        $("body").css({'overflow-y':'hidden'});
    },
    afterClose: function(){
        $("body").css({'overflow-y':'visible'});
    },
    helpers : {
        overlay : {
            opacity: 0.4,
            locked: false
        }
    }
});

我希望这对你起作用。

- Avinash Mishra

---

完美优雅的编程解决方案，不需要修改CSS文件。这应该被认可为最佳答案。 - Terry Carter

@TerryCarter 谢谢 :) - Avinash Mishra

Answer 3

这对我有用：

$.fancybox({
        scrolling   : 'hidden',
        helpers: {
            overlay: {
              locked: true 
            }
        });

希望能对您有所帮助 :)

- SimCity

---

嗨，也许是我自己的问题，但我似乎找不到这些选项的文档。你能分享一下这些选项的文档链接吗？ - Bertvan

为了停止滚动，应该将其设置为false而不是true。请参见：https://dev59.com/sWYr5IYBdhLWcg3wmLRk#15306863 - Sparky

Answer 4

我的猜测是？您点击以触发fancybox的选择器很可能是一个带有类似于hashmark的锚点：

<a href="#">

然后你可以从最近的 <a> 元素中获取 fancybox 的 href，就像你的代码一样：

  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  }

这里有一个演示，可以重现您描述的行为（将内容向下滚动，直到找到触发fancybox的缩略图）

如果我上面所假设的是正确的，那么您可能的解决方案是：

1). 更改锚点的href属性中的hashmark为hashtag #nogo，例如：<a href="#nogo">

就像Stuart Nicholls (cssplay)在链接帖子上于2005年3月15日更新中提到的那样。

2). 或者用javascript:; 替换锚点的href属性中的hashmark，例如：<a href="javascript:;">

查看使用第一种选项的更新JSFIDDLE。

- JFK

---

我们使用this.title和this.href的结构，因为我们在链接周围构建了一个包装器，以显示图像右下角的微小放大镜。因此，用户可以区分该图像是否可以在fancybox中显示。该链接具有指向较大图像的实际URL而不是哈希标记。 - tomsteg

@user2210437，你能分享一个链接来查看这个行为吗？ - JFK

抱歉，重新上线现在还未完成，但四月中旬不论是否有这个 bug 都将上线。 - tomsteg

它们被称为“片段”，而不是“hashtags”。天啊。 - Christian

@Christian：在这种情况下（如果我的回答的假设是正确的），它们不是“片段标识符”，因为它们没有指向文档中的任何部分，所以它们只是hashmark...另一方面，“#nogo”这个词是一个hashtag。我编辑了我的回答以避免混淆。 - JFK

Answer 5

我知道这个问题已经被问了一段时间，但我认为我已经找到了一个很好的解决方案。问题在于fancy box更改了body的溢出值以隐藏浏览器滚动条。

正如SimCity所指出的那样，我们可以通过添加以下参数来阻止fancy box这样做：

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

现在我们可以在查看我们的精美窗口时滚动主页面。这比跳到页面顶部要好，但这可能不是我们真正想要的。

我们可以通过添加下一个参数来正确地防止滚动：

    $('.image').fancybox({
      padding: 0,
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
    });

请从galambalaz中添加这些函数。参见：如何暂时禁用滚动？

    var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }

- Joeran

Answer 6

$('.fancybox').fancybox({
 'beforeLoad': function(){
   disable_scroll();
    },
 'afterClose': function(){
   enable_scroll();
  }
});

var disabled_scroll = false;

function disable_scroll() {
  disabled_scroll = true;
}

function enable_scroll() {
  disabled_scroll = false;
}

在fullPage.js中

function scrollPage(element, callback, isMovementUp)
{
   if(disabled_scroll) return;
   .....
}

- Alper Onur

Answer 7

在jquery.fancybox.css中 -> .fancybox-lock 更改: ``` overflow: hidden !important; ``` 为: ``` overflow: visible !important; ``` 对我有效 :)

- Martin Filek

---

这是编辑插件的核心文件 - 除非没有其他方法可以完成工作，否则我们不能称其为推荐技术。 :) - user216084

Answer 8

你可以尝试这个：-

beforeShow: function(){
 $("body").css({'overflow-y':'hidden'});
},

afterClose: function(){
 $("body").css({'overflow-y':'visible'});

} 

在 fancybox 打开时停止父页面的垂直滚动。

- Ravindra Shekhawat

---

我认为你并没有真正理解这个问题。问题在于关闭fancybox之后，父页面已经滚动到了顶部。 - JFK

那没有帮助。什么都没有改变。 - tomsteg

抱歉，重新启动现在还没有上线，但无论如何，将在四月中旬上线，不管有没有这个错误。 - tomsteg

我们的网站现在已经上线了，但是我们还没有解决使用fancybox2图像时滚动背景的问题。这里有一个页面链接，其中使用了fancybox2：https://agenda-kunden.de/faq-fibu-allgemein.htm 要查看内容，您必须先注册。典型的fancybox图像是带有放大镜的那些。我们仍然不知道为什么背景页面会滚动到顶部。 - tomsteg

Answer 9

我的修改，这对我很有帮助

/* Fancybox */
$('.fancybox').fancybox({
    beforeShow: function(){
        $("body").css({
            "overflow-y": "hidden",
            "position": "fixed"
            }
        );
    },
    afterClose: function(){
        $("body").removeAttr("style");
    }
});

- Maxim Smirnov