fancyBox v2：如何防止Chrome中的背景滚动？
我正在使用fancyBox v2.1.4。 在Chrome中，它允许在fancyBox打开时滚动主页面。
我正在使用locked: true但似乎没有解决问题。 我还考虑使用e.preventDefault禁用某些滚动function作为另一种选择：
$(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 } }); });
这段代码对我有用：
我已经找到了解决你（也是我）问题的方法。 在此之前，我能够在默认浏览器中滚动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); } }); });
此代码在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(); }); }
重复scrollfunction而不使用e.preventDefault();在afterClose上重置此项e.preventDefault();
您可以使用scrollOutside设置：
.fancybox({ scrolling: "no", scrollOutside: "false" });
scrolling设置可防止垂直滚动条显示。
完美地为我工作：
$('.image').fancybox({ helpers: { overlay: { locked: false } } });