如何防止fancybox-2后面的页面滚动
我们使用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块中。
那里有2个滚动条，我用css隐藏了一个
.fancybox-overlay { overflow: hidden !important; }
显然，Fancybox会在显示图片时将body元素上的CSS属性overflow更改为hidden 。 这会导致背景滚动回到顶部。 所有你需要做的就是注释掉溢出的行overflow: hidden !important; 在样式表jquery.fancybox.css .fancybox-lock部分。
请参阅fancybox2 / fancybox导致页面也跳转到顶部 。
这对我来说很好：
在facnybox初始化中添加以下function
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 } } });
我希望它对你有用。
这对我有用：
$.fancybox({ scrolling : 'hidden', helpers: { overlay: { locked: true } });
希望能帮助到你 ：）
我猜？ 您单击以激活fancybox的选择器很可能是具有hashmark的锚点，如：
然后你从最近的元素中获取fancybox的href ，就像你的代码一样：
beforeLoad: function(){ this.title = getTitle(this); this.href = $(this.element).closest('a').attr('href'); }
这是一个再现您正在描述的行为的演示 （向下滚动内容，直到找到触发fancybox的缩略图）
如果我上面假设的是正确的，那么您可能的解决方案是：
正如Stuart Nicholls（cssplay）在2005年3月15日的链接post中所提到的那样。
2）。 或者通过javascript:;替换锚点的href属性中的javascript:; 喜欢
使用第一个选项查看更新的JSFIDDLE 。
我意识到这个问题已经被问过了，但我想我找到了一个很好的解决方案。 问题是花式框改变了主体的溢出值以隐藏浏览器滚动条。
正如SimCity指出的那样，我们可以通过添加以下参数来阻止花哨的盒子：
$('.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的这些function。 请参阅： 如何暂时禁用滚动？
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; }
你可以试试这个： –
beforeShow: function(){ $("body").css({'overflow-y':'hidden'}); }, afterClose: function(){ $("body").css({'overflow-y':'visible'}); }
当fancybox打开时，它会停止父页面上的垂直滚动。
在jquery.fancybox.css – > .fancybox-lock中
更改：
overflow: hidden !important;
至：
overflow: visible !important;
适合我:)
我的修改，这对我有帮助
/* Fancybox */ $('.fancybox').fancybox({ beforeShow: function(){ $("body").css({ "overflow-y": "hidden", "position": "fixed" } ); }, afterClose: function(){ $("body").removeAttr("style"); } });
$('.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; ..... }