Tengo un formulario que se muestra en una ventana emergente. Después de cargar, el fondo aparece atenuado, pero el usuario puede desplazar el contenido de fondo hacia arriba y hacia abajo.Evitar el desplazamiento en segundo plano al mostrar ventanas emergentes
¿Cómo evito que se desplace el fondo?
el 'e-mail esta cita' vínculo a la derecha de la pantalla pdf.
Gracias! Joe
Una opción es establecer temporalmente la propiedad overflow a hidden en body, que se librará de la barras de desplazamiento, pero provoca un pequeño parpadeo cuando se ajusta la página.
La otra opción es tocar el evento $(window).scroll() y devolver falso desde allí. Eso también causará un poco de parpadeo ya que el navegador no reacciona tan rápido a la declaración falsa de devolución.
Su mejor opción es mover sus controladores de eventos de clic en un archivo separado y hacer la unión no:
$(function() {
$('.emailPost').click(function() {
$(window).scroll(function() { return false; });
pageTracker._trackPageview('/onclick/emailquote');
});
});
Eso debería impedir que una página de desplazamiento. Recuerde eliminar el enlace después de que se cierre el cuadro de diálogo; de lo contrario, la página ya no podrá desplazarse. Puede eliminar une usando:
$(window).unbind('scroll');
¡No use la etiqueta # en sus enlaces!
Intentará desplazarse al ancla # pero como está vacío se desplazará a la parte superior de la página.
Editar sus enlaces a:
<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>
(notar el href = "")
Absolutamente utilice la etiqueta hash y en ningún caso utilice JavaScript en línea. Para evitar que el navegador redirija a #, puede usar 'return false;' al final de la función del controlador. http://crisp.tweakblogs.net/blog/313/the-useless-javascript-pseudo-protocol.html –
Lo siento, Rogier, eso no resolvió el problema. También lo hace para que la página vuelva a cargar y cierre la ventana emergente. ¡Gracias! – Joe
Sí, todavía tendrá que usar el retorno falso, por supuesto! Pero eso es realmente básico JS;) 'Email this quote' Funcionará bien. – YesMan85
ocultar la barra de desplazamiento del cuerpo al abrir la ventana emergente
document.body.style.overflow = "hidden";
y volver al cerrar la ventana emergente
document.body.style.overflow = "visible";
Al asignar un desbordamiento oculto, la barra de desplazamiento desaparecerá, lo que cambiará el ancho de la página. Esto no desactiva la barra de desplazamiento, aunque evita que se produzca el desplazamiento. – Thomas
me gusta esta solución :) – jondinham
Tu solución funciona, pero cuando cierras el menú emergente y vuelves a activarlo, también se desplaza horizontalmente. Que no es obligatorio –
obras de bloque Este código de IOS móviles dispositivos donde el problema de desplazamiento es muy común.
$('body').on('touchmove', function(e) {
if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
});
$('body').on('shown.bs.modal', function() {
$(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
$(this).removeClass('scroll-disable');
});
Gracias. Pero, ¿esta solución causaría parpadeo de la pantalla? Además, el pageTracker se pasa a través de un campo personalizado configurado en Wordpress, y no sería fácil interactuar con jQuery. – Joe
no funciona en safari 4 y firefox 3.5.7. – DataGreed
Tengo la misma situación. Esta es una buena solución, ya que bloquea el desplazamiento en FF24.0, pero aún permite que la página se mueva usando end/home/pageup/pagedown; Además, no parece funcionar en IE8. No lo he probado más allá de esos dos navegadores, pero el comentario anterior parece mostrar que esta pregunta necesita algo de trabajo. – Thomas