我们正在使用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;
}
答案 0 :(得分:21)
显然,当显示图片时,Fancybox会将overflow
元素上的CSS属性body
更改为hidden
。这会导致背景滚动回到顶部。您所要做的就是在样式表overflow: hidden !important;
的{{1}}部分中注明.fancybox-lock
行。
请同时参阅fancybox2 / fancybox causes page to to jump to the top。
答案 1 :(得分:17)
这对我来说很好:
在facnybox初始化中添加以下功能
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
}
}
});
我希望它对你有用。
答案 2 :(得分:4)
这对我有用:
$.fancybox({
scrolling : 'hidden',
helpers: {
overlay: {
locked: true
}
});
希望有所帮助:)
答案 3 :(得分:3)
我的猜测?您单击以激活fancybox的选择器很可能是具有hashmark
的锚点,如:
<a href="#">
然后你会从最近的href
元素中获取fancybox的<a>
,就像你的代码一样:
beforeLoad: function(){
this.title = getTitle(this);
this.href = $(this.element).closest('a').attr('href');
}
此处 is a DEMO 会重现您所描述的行为(向下滚动内容,直至找到触发fancybox的缩略图)
如果我上面假设的是正确的,那么您可能的解决方案是:
1)。将锚点hashmark
属性中的href
更改为hashtag
#nogo
,如<a href="#nogo">
由Stuart Nicholls (cssplay)在2005年3月15日更新的链接帖子中提及。
2)。或者通过hashmark
href
取代javascript:;
属性<a href="javascript:;">
中的{{1}} {/ 1}}
使用第一个选项查看 updated JSFIDDLE 。
答案 4 :(得分:1)
我意识到这个问题已经被问过了,但我想我找到了一个很好的解决方案。 问题是花式框改变了主体的溢出值以隐藏浏览器滚动条。
正如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添加这些功能。请参阅:How to disable scrolling temporarily?
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;
}
答案 5 :(得分:0)
你可以试试这个: -
beforeShow: function(){
$("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
$("body").css({'overflow-y':'visible'});
}
当fancybox打开时,它会停止父页面上的垂直滚动。
答案 6 :(得分:0)
在jquery.fancybox.css中 - &gt; .fancybox-lock
改变:
overflow: hidden !important;
至:
overflow: visible !important;
适合我:)
答案 7 :(得分:0)
我的修改,这对我有帮助
/* Fancybox */
$('.fancybox').fancybox({
beforeShow: function(){
$("body").css({
"overflow-y": "hidden",
"position": "fixed"
}
);
},
afterClose: function(){
$("body").removeAttr("style");
}
});
答案 8 :(得分:0)
$('.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;
.....
}