激活fancybox 2时,父页面上的滚动条会闪烁,导致内容向左移动然后向后移动
任何想法如何解决滚动条问题? 每当我的网站上激活fancybox时,它会在初始化时创建一个滚动条,然后再次闪烁 – 但这会将整个页面移动一瞬间。 不是很优雅!
这是Fancybox 2的错误吗?
用于激活Fancybox的代码:
$('map > area.fancybox').click(function(e) { e.preventDefault(); var url = $(this).attr('href'); $.fancybox({ 'href' : url, closeBtn : true, width : '467', height : '609', fitToView : false, padding : '5', openEffect : 'none', closeEffect : 'none' }); });
单击以激活滚动条时,只需在jQuery代码中添加以下代码即可
$("body").css("overflow","hidden"); // hide body scrollbar
当关闭fancybox时添加以下代码
$("body").css("overflow","auto"); // show body scrollbar
只需添加选项下一个代码:
helpers: { overlay: { locked: false } }
在以下位置编辑jquery.fancybox.css文件
.fancybox-lock { overflow: hidden; }
变
.fancybox-lock { overflow: hidden; margin-right:0 !important; <-- Add this }
和
.fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; }
变
.fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: auto; <-- }
你使用html { overflow-y: scroll; }
html { overflow-y: scroll; }
? 这与Fancybox发生冲突。 Fancybox为您的body
添加了一个类,称为.fancybox-lock
,它将内容向右移动17px。
该脚本从“body”元素中删除滚动条(通过应用“fancybox-lock”类),然后通过添加边距来补偿它们以避免内容移位。
您可以像这样覆盖它:
.fancybox-lock { margin: 0 !important; }
阅读更多: https : //github.com/fancyapps/fancyBox/issues/340
确保您的Fancybox没有初始化两次。 我经历了多年的痛苦,当我认为Fancybox 2有AJAX窗口的错误时,让我多次初始化是我的错。
在花哨的方框2中,大部分时间显示滚动条,为了避免这种情况,我们必须设置需要在iframe中加载的主体的高度和宽度,
即
//body content come here
这是一种方法,还有一些其他方法可以解决这个问题。
只是尝试添加保证金。 它帮助了我。
.fancybox-lock { overflow: hidden !important; width: auto; margin-right: 20px; }
在版本:2.1.1我删除行1743 – 1749之间的行。坏方法是但工作。 ^ _ ^
改变这个:
if (obj.fixed && !isTouch) { if (obj.locked) { this.el.addClass('fancybox-lock'); if (this.margin !== false) { $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth); } } } else { this.update(); }
至:
if (obj.fixed && !isTouch) { } else { this.update(); }