jQuery-Fancybox:¡Pero no quiero barras de desplazamiento!
https://stackoverflow.com/questions/2268330
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy usando jQuery Fancybox para un formulario de registro emergente aquí
Me gustaría que el formulario tuviera un tamaño de 450 px por 700 px, pero no importa en qué establezca la altura y el ancho, obtengo barras de desplazamiento:
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : '450',
'height' : '700',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
Debe haber algo que estoy haciendo mal pero no puedo entender qué es.Agradecería una mano útil aquí.Gracias.
Solución
Suena un poco extraño. una solución feo es utilizar css, overflow: hidden;
Siempre que uso FancyBox, las barras de desplazamiento funcionan correctamente. Asegúrese de que el contenido del oc FancyBox no está fijando otra altura?
Editar: Visto el ejemplo in situ. Parece que hay una cierta anchura beeing encuentra en el contenido que es más grande que la propia FancyBox.
Otros consejos
Yo tenía el mismo problema con FancyBox y un iframe, buscado en Google para una solución y terminé aquí. El overflow: hidden no funcionó para mí, sin embargo descubrí que FancyBox le permite establecer la opción para el iframe scrolling (equivalente a establecer "scrolling = no" atributo en el marco flotante), que corrige el problema en Internet Explorer 7 en un mayor de manera elegante:
$.fancybox({
'type' : 'iframe',
'scrolling' : 'no',
... and the rest of the parameters.
Me costó un poco con esto, sólo para encontrar la respuesta en la documentación FancyBox.
Como insinuado anteriormente, primero pensé que hubiera sido tan fácil como esto para desactivar el desplazamiento:
$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})
Sólo configurar la opción de 'desplazamiento' a 'no' no fue suficiente, sin embargo. Tuve que repetir la misma cosa en la opción 'iframe', así:
$('.fancybox').fancybox({
'type': 'iframe',
'scrolling': 'no',
'width': 500,
'iframe': {'scrolling': 'no'}
})
Sólo quería decir que la respuesta de Magnus anteriormente lo hizo por mí, sino por el segundo 'superposición' que debe ser 'desbordamiento'
helpers : {
overlay : {
css : { 'overflow' : 'hidden' }
}
}
después de probar cada uno de los consejos anteriores (y aún tener barras de desplazamiento inútiles causadas por algunas funciones en línea) overflow: scroll en .fancybox-inner) y también probando muchas otras soluciones, me deshice de las barras de desplazamiento con esta solución:
afterShow: function(){
this.inner.css({
overflow: 'auto' // or 'no'
});
}
Tengo enfrentar el mismo problema y después de los momentos de prueba y error, descubrí que se puede evitar barras de desplazamiento por razones imperiosas de clase CSS marco.
Puede hacer como esto:
iframe.fancybox-iframe {
overflow:hidden;
}
configuración JS:
jQuery(document).ready(function(){
$("a.various").fancybox({
'width' : 'auto',
'height' : 'auto',
'autoScale' : false,
'autoDimensions' : false,
'scrolling' : 'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
Nota:. Su FancyBox tipo de caja debe ser un iframe para que esto tenga efecto
He tenido un problema similar, con barras de desplazamiento verticales que aparecen cuando me puse un anchoMax en las opciones FancyBox.
Para evitar el problema que tenía que ajustar
.fancybox-inner {
overflow: hidden !important;
}
y establecer una regla CSS ancho fijo en el contenido FancyBox en lugar de especificar un anchoMax en las opciones FancyBox. Si lo hiciera este último, altura calculada de FancyBox para el contenido fue un poco demasiado pequeña -. Probablemente haciendo alusión a por qué se estaba poniendo en barras de desplazamiento en el primer lugar
Es necesario poner la opción iframe en su propio contexto, por ejemplo:
$(".someclass").fancybox({
type : 'iframe',
iframe : {
scrolling : 'no'
}
});
Creo que la solución a esto es establecer
'autoDimensions' : false
A continuación, el ancho y la altura de los contenidos en línea serían tan establece que sea
Sé que esto suena un poco raro, pero ¿Alguno de ustedes tratado de establecer el margin de la etiqueta de página de la forma del cuerpo a 0.
El problema es en realidad bastante simple, la razón es que el margin cuerpo de la etiqueta por defecto se establece en 8px (dependiendo del navegador) y si sólo se establece en 0, entonces se fija la barra de desplazamiento.
La configuración js que tengo es como sigue y funciona bien sin cambiar el css de FancyBox.
$(".iframe").fancybox({
'autoScale' : false,
'autoDimensions' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
Añadir iframe: {desplazamiento: 'no' como opción}
ejemplo
$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload : true
}});
Quitar las comillas alrededor de su altura y valores de anchura:
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : 450,
'height' : 700,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
tuve que supongo que la misma cuestión. No fue lo que fue la FancyBox propiedades o CSS, pero el css principal de mi sitio.
Si usted tiene algo así como
div {overflow:auto;height:auto;}
para un heredable / root en su sitio css entonces causará problemas de barra de desplazamiento en la caja de lujo. Retirar y hacer su HTML y CSS más precisa con las identificaciones y las clases
FancyBox 2.x al menos tiene un "ayudante de superposición", que resultó ser la clave para mí. He añadido los siguientes parámetros de configuración a mis FancyBox:
helpers : {
overlay : {
css : { 'overlay' : 'hidden' }
}
}
Había intentado fijar esto en el CSS, pero eso no funcionaba, y al final del juego, como en el caso beforeShow, pero que condujo a una barra parpadeante. Esto parece funcionar sin problemas.
en jquery.fancybox.js, he editado esta parte:
iframe : {
scrolling : 'no', // i changed this from 'auto' to 'no'
preload : true
},
$(".various").fancybox({
fitToView : false,
width : '100%',
height : '100%',
maxWidth : 850,
maxHeight : 550,
fitToView : false,
padding : 20,
autoSize : true,
closeClick : true,
openEffect : 'none',
closeEffect : 'none',
overflow : 'hidden',
scrolling : 'no'
});
Este es el único que trabajó para mí durante tanto IE y Google Chrome, creo que es sobre todo debido a la materia .body.scrollHeight, que funciona en IE mejor. Pongo 30 para Firefox ...
jQuery.fancybox({
href: href,
type: "iframe",
centerOnScroll: 'true',
scrolling: 'no',
width: 650,
'onComplete': function() {
jQuery('#fancybox-frame').load(function() {
jQuery('#fancybox-content').height(this.contentWindow.document.body.scrollHeight + 30);
});
}
});
Al usar la versión FancyBox: 2.1.5 e intentado todas las diferentes opciones sugerir aquí y ninguno de ellos todavía prácticos que muestran la barra de desplazamiento
.$('.foo').click(function(e){
$.fancybox({
href: $(this).data('href'),
type: 'iframe',
scrolling: 'no',
iframe : {
scrolling : 'no'
}
});
e.preventDefault();
});
Así que hicimos un poco de depuración en el código hasta que encontré este, por lo que su sobrescribir todas las opciones que puse y no hay manera de sobrescribir esta usando las muchas opciones.
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}
Al final, las soluciones fue usar CSS! Truco importante.
.fancybox-inner {
overflow: hidden !important;
}
La línea de código es responsable de:
current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));
FancyBox solía ser una solución de trabajo fiable ahora estoy encontrando nada más que incoherencias. En realidad el debate acerca degradar ahora incluso después de comprar una licencia de desarrolladores. Más información aquí si no se dio cuenta que necesitaba una para proyecto comercial: https://stackoverflow.com/a/8837258/560287
Aquí hay otro pensamiento. Tenía
html { overflow-y: scroll; }
en mi CSS principal para evitar un contenido centrado en el bien de saltar entre las páginas que recibieron o no requieren una barra de desplazamiento. He intentado todo lo anterior para deshacerse de la barra de desplazamiento en la ventana emergente hasta que me di cuenta de esto. Una vez que se apagaba por sólo la ventana emergente, la barra de desplazamiento en la ventana emergente desapareció también. Por lo tanto, asegúrese de que la barra de desplazamiento que está viendo en realidad proviene de la iframe y no desde la página interior.
Mis 2 centavos, escribir
*{ margin:0; padding:0; }
en su página de destino principal css, añadir un div de contenido con el tamaño de la altura de todos sus elementos, no toque las Js, Listo, saludos
197 Editar línea y 198 de jquery.fancybox.css:
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: auto;
}
Lo hice para deshacerse del desbordamiento (barra de desplazamiento) ...
al final de la jquery.fancybox .... js archivo No onStart, onCancel, funciones onComplete etc., y todos ellos están vacías ... así que sólo tiene que ir adelante y llenar en las llaves de onStart con " $ ( 'cuerpo'). css ( 'desbordamiento', 'oculto')" y onClosed "$ ( 'cuerpo'). css ( 'desbordamiento', 'visible')" ... debería tener este aspecto ...
onStart:function(){$('body').css('overflow','hidden')},
onClosed:function(){$('body').css('overflow','visible')},
paz
Las respuestas aquí ofrecen muchas otras posibilidades de solucionar este problema, pero la mayoría no va a funcionar para dispositivos con pantallas táctiles. Creo que el origen del problema se deriva de estas líneas de código de la fuente:
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}
Esto parece anular cualquier opciones establecidas por la configuración inicial FancyBox, y sólo se puede cambiar después de estas líneas de código han ejecutar, es decir, cambiando el css utilizando el método afterShow. Sin embargo, todos estos métodos provocan un retraso notable / lag y usted será capaz de ver las barras de desplazamiento desaparecen a medida que lo abra.
Mi solución sugerida es que quite estas líneas de la principal jquery.fancybox.js archivo de origen alrededor de la línea 880, porque no veo una razón para obligar a las barras de desplazamiento en dispositivos con pantallas táctiles.
Tenga en cuenta que esto no va a hacer inmediatamente las barras de desplazamiento desaparecen, simplemente se deja que anule la opción de configuración scrolling. Por lo que también debe agregar scrolling: 'no' a su configuración inicial FancyBox.
Otra alternativa es cambiar la desbordamiento :
body {
overflow: hidden;
}
en el HTML de su marco flotante.
