jquery - app - fancybox2/fancybox hace que la página salte a la cima
fancybox jquery 3.3 1 (10)
¡La respuesta aceptada no está completa ya que no resuelve el problema, simplemente lo evita! Aquí hay una respuesta más completa que realmente le da la funcionalidad deseada mientras soluciona el problema de salto de ventana:
$(''.fancybox'').fancybox({
helpers: {
overlay: {
locked: false
}
},
beforeShow:function(){
$(''html'').css(''overflowX'', ''visible'');
$(''body'').css(''overflowY'', ''hidden'');
},
afterClose:function(){
$(''html'').css(''overflowX'', ''hidden'');
$(''body'').css(''overflowY'', ''visible'');
}
});
Implementé fancybox2 en un sitio de desarrollo.
Cuando selecciono la fancybox (haga clic en el enlace, etc.), todo el html se desplaza hacia atrás, y sube a la parte superior. Lo tengo funcionando bien en otra demostración, pero cuando arrastro el mismo código a este proyecto, salta a la cima. No solo con los enlaces a divs en línea, sino también para una simple galería de imágenes.
Alguien ha experimentado esto?
A pesar de que la forma correcta de resolver este problema es a través de las opciones, que proporciona Fancybox ( consulte esta respuesta ), CSS podría usarse para resolver el problema. No es necesario editar el archivo CSS de la biblioteca, simplemente agréguelo a la hoja de estilos principal de la aplicación:
html.fancybox-lock {
overflow: visible !important;
}
El código restablece el desbordamiento original del elemento. El problema es ese overflow: hidden; oculta la barra de desplazamiento en el elemento <html> , lo que hace que la página "salte" hacia la parte superior. Para preservar la posición de la barra de desplazamiento, sobrescribimos el desbordamiento con overflow: visible;
De hecho, puede codificar de esta manera si está utilizando la función predeterminada de fancybox:
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
});
El problema es que fancyBox cambia el valor de desbordamiento del cuerpo para ocultar las barras de desplazamiento del navegador. No pude encontrar una opción para alternar este comportamiento.
Puede eliminar esta sección del código fancyBox para evitarlo:
if (obj.locked) {
this.el.addClass(''fancybox-lock'');
if (this.margin !== false) {
$(''body'').css(''margin-right'', getScalar( this.margin ) + obj.scrollbarWidth);
}
}
Esto realmente se puede hacer con un ayudante en Fancybox 2.
$(''.image'').fancybox({
helpers: {
overlay: {
locked: false
}
}
});
http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/
Esto también ayudó
.fancybox-lock body {
overflow: visible !important;
}
Jordanj77 es correcto, pero la solución más fácil es ir a stylesheet jquery.fancybox.css y comentar la fila diciendo overflow: hidden !important; en la sección .fancybox-lock
Lo arreglé con:
overflow: hidden !important;
en .fancybox-lock body en jquery.fancybox.css . Y la barra de desplazamiento no salta :)
Me doy cuenta de que esta es una vieja pregunta, pero creo que he encontrado una buena solución para eso. El problema es que esa elegante caja cambia el valor de desbordamiento del cuerpo para ocultar las barras de desplazamiento del navegador.
Como señala Dave Kiss, podemos evitar que la caja de fantasía haga esto agregando los siguientes parámetros:
$(''.image'').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
Pero ahora podemos desplazarnos por la página principal mientras vemos nuestra elegante ventana de caja. Es mejor que saltar a la parte superior de la página, pero probablemente no sea lo que realmente queremos.
Podemos evitar que se desplace de la manera correcta agregando los siguientes parámetros:
$(''.image'').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
},
''beforeLoad'': function(){
disable_scroll();
},
''afterClose'': function(){
enable_scroll();
}
});
Y agrega estas funciones de galambalaz. Ver: ¿Cómo deshabilitar el desplazamiento temporalmente?
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;
}
Tal vez esta respuesta llegue hasta tarde, pero tal vez podría ayudar en el futuro, si después de cliquear / cerrar una imagen fancybox hace que su sitio web se desplace a la cima, simplemente podría eliminar:
F.trigger(''onReady'');
o mejor uso:
/*F.trigger(''onReady'');*/
En la versión de fancyBox: 2.1.5 (viernes, 14 de junio de 2013) esa parte del código está en la línea 897.