jQuery 如何防止在fancybox-2后面滚动页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15631124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to prevent scrolling of page behind fancybox-2
提问by tomsteg
We are using fancybox2 for displaying images. Everything works well, but when the larger image is displayed in the fancybox, the page behind scrolls to the top. After closing the fancybox the user has to scroll back downwards to the position, where he opened the box. The examples on the fancybox2 Site do not show this behaviour. I could not find out, where is the difference to make this happen.
我们使用fancybox2 来显示图像。一切正常，但是当fancybox中显示较大的图像时，后面的页面会滚动到顶部。关闭fancybox 后，用户必须向下滚动到他打开盒子的位置。Fantasybox2 站点上的示例没有显示这种行为。我不知道，让这发生的区别在哪里。
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'
}
}
};
We are using fancybox2 as a module within require.js. The .fancybox() call is in a $(document).ready block.
我们在require.js 中使用fancybox2 作为模块。.fancybox() 调用位于 $(document).ready 块中。
There where 2 scrollbars and I hid one with css
那里有 2 个滚动条，我用 css 隐藏了一个
.fancybox-overlay {
overflow: hidden !important;
}
回答by fast-reflexes
Apparently, Fancybox changes the CSS property overflowon bodyelement to hiddenwhen a picture is showed. This causes the background to scroll back to the top. All you have to do is comment out the row saying overflow: hidden !important;in section .fancybox-lockin stylesheet jquery.fancybox.css.
显然，改变的fancybox的CSS属性overflow的body元素来hidden拍摄照片时显示。这会导致背景滚动回顶部。您所要做的就是注释掉stylesheetoverflow: hidden !important;中 section.fancybox-lock中的行jquery.fancybox.css。
Please see fancybox2 / fancybox causes page to to jump to the topas well.
回答by Avinash
This is working fine for me:
这对我来说很好用：
Add follow functions in facnybox initialization
在 facnybox 初始化中添加跟随功能
beforeShow: function(){
$("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
$("body").css({'overflow-y':'visible'});
}
Example:
例子：
$(".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
}
}
});
I hope it will work for you.
我希望它对你有用。
回答by SimCity
This worked for me :
这对我有用：
$.fancybox({
scrolling : 'hidden',
helpers: {
overlay: {
locked: true
}
});
Hope it helps :)
希望能帮助到你 ：）
回答by JFK
My guess? The selector you click to fire fancybox is most likely an anchor with a hashmarklike :
我猜？你点击来触发fancybox的选择器很可能是一个带有hashmarklike的锚点：
<a href="#">
then you get the fancybox's hreffrom the closest <a>element, as in your code :
然后你href从最近的<a>元素中获取fancybox ，就像你的代码一样：
beforeLoad: function(){
this.title = getTitle(this);
this.href = $(this.element).closest('a').attr('href');
}
Here is a DEMOthat reproduces the behavior you are describing (scroll the content down until you find the thumbnail that fires fancybox)
这是一个演示您所描述的行为的演示（向下滚动内容，直到找到触发fancybox的缩略图）
If what I assumed above is correct, then your possible solutions are :
如果我上面的假设是正确的，那么您可能的解决方案是：
1). Change the hashmarkin your anchor's hrefattribute to the hashtag#nogolike <a href="#nogo">
1）。改变hashmark你的锚的href属性到hashtag#nogo像<a href="#nogo">
as referred by Stuart Nicholls (cssplay)in his update of 15th March 2005 in the linked post.
正如Stuart Nicholls (cssplay)在 2005 年 3 月 15 日更新的链接帖子中提到的那样。
2). Or replace the hashmarkin your anchor's hrefattribute by javascript:;like <a href="javascript:;">
2）。或者将hashmark锚点href属性中的替换为javascript:;like<a href="javascript:;">
See updated JSFIDDLEusing the first option.
使用第一个选项查看更新的 JSFIDDLE。
回答by Joeran
I realize this question has been asked a while ago, but I think I have found a good solution for it. The problem is that fancy box changes the overflow value of the body in order to hide the browser scrollbars.
我意识到这个问题已经被问过一段时间了，但我想我已经找到了一个很好的解决方案。问题是花式框改变了主体的溢出值以隐藏浏览器滚动条。
As SimCity points out, we can stop fancy box from doing this by adding the following parameters:
正如 SimCity 所指出的，我们可以通过添加以下参数来阻止花哨的盒子这样做：
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
But, now we can scroll the main page while looking at our fancy box window. It is better than jumping to the top of the page, but it is probably not what we really want.
但是，现在我们可以在查看我们漂亮的框窗口的同时滚动主页。这比跳到页面顶部要好，但这可能不是我们真正想要的。
We can prevent scrolling the right way by adding the next parameters:
我们可以通过添加以下参数来防止以正确的方式滚动：
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
},
'beforeLoad': function(){
disable_scroll();
},
'afterClose': function(){
enable_scroll();
}
});
And add these functions from galambalaz. See: How to disable scrolling temporarily?
并从 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;
}
回答by Ravindra Shekhawat
You may try this :-
你可以试试这个：-
beforeShow: function(){
$("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
$("body").css({'overflow-y':'visible'});
}
It stops the vertical scrolling on the parent page while fancybox is open.
当fancybox 打开时，它会停止父页面上的垂直滚动。
回答by Maxim Smirnov
My modification, this help me
我的修改，这对我有帮助
/* Fancybox */
$('.fancybox').fancybox({
beforeShow: function(){
$("body").css({
"overflow-y": "hidden",
"position": "fixed"
}
);
},
afterClose: function(){
$("body").removeAttr("style");
}
});
回答by Alper Onur
$('.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;
}
in fullPage.js
在 fullPage.js 中
function scrollPage(element, callback, isMovementUp)
{
if(disabled_scroll) return;
.....
}
回答by Martin Filek
In jquery.fancybox.css -> .fancybox-lock
change: overflow: hidden !important;
to: overflow: visible !important;
works for me :)
在 jquery.fancybox.css -> .fancybox-lock
更改：overflow: hidden !important;
到：overflow: visible !important;
对我有用:)
