she*_*rek 104 css jquery fancybox-2
我在开发站点上实现了fancybox2.
当我使用fancybox(点击链接等)时,整个html会在它后面移动 - 然后转到顶部.我在另一个演示中工作正常,但是当我将相同的代码拖到这个项目时,它会跳到顶部.不仅有内联div的链接,还有简单的图库.
有没有人经历过这个？
Dav*_*iss 329
这实际上可以通过Fancybox 2中的帮助程序来完成.
$('.image').fancybox({
helpers: {
overlay: {
locked: false
}
}
});
http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/
fas*_*xes 35
Jordanj77是正确的,但最简单的解决方案是只去样式表jquery.fancybox.css并注释掉一行overflow: hidden !important;中的行.fancybox-lock
Joe*_*ran 14
我意识到这是一个老问题,但我认为我找到了一个很好的解决方案.问题是花式框改变了主体的溢出值以隐藏浏览器滚动条.
正如Dave Kiss指出的那样,我们可以通过添加以下参数来阻止花哨的盒子:
$('.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添加这些功能.请参阅:如何暂时禁用滚动？
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;
}
小智 9
问题是fancyBox会更改正文的溢出值以隐藏浏览器滚动条.我找不到切换此行为的选项.
您可以删除fancyBox代码的此部分以防止它:
if (obj.locked) {
this.el.addClass('fancybox-lock');
if (this.margin !== false) {
$('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
}
}
尽管如此,解决这个问题的正确方法是通过fancybox提供的选项(参考这个答案),CSS可以用来解决问题.无需编辑库的css文件,只需将其添加到应用程序的主样式表中:
html.fancybox-lock {
overflow: visible !important;
}
代码重置元素的原始溢出.问题是overflow: hidden;隐藏<html>元素上的滚动条,这会导致页面"跳转"到顶部.为了保留滚动条的位置,我们用溢出覆盖溢出overflow: visible;
| 归档时间： |
|
| 查看次数： |
78279 次 |
| 最近记录： |