Cómo deshabilitar mediante progtwigción el desplazamiento de página con jQuery

Usando jQuery, me gustaría deshabilitar el desplazamiento del cuerpo:

Mi idea es:

  1. Establecer body{ overflow: hidden;}
  2. Capture el scrollTop();/scrollLeft() actual scrollTop();/scrollLeft()
  3. Enlace al evento de desplazamiento del cuerpo, establezca scrollTop / scrollLeft en el valor capturado.

¿Hay una mejor manera?


Actualizar:

Por favor vea mi ejemplo, y una razón por la cual, en http://jsbin.com/ikuma4/2/edit

Soy consciente de que alguien pensará “¿por qué no solo usa la position: fixed en el panel?”.

Por favor, no sugiera esto ya que tengo otras razones.

La única forma que he encontrado de hacer esto es similar a lo que describiste:

  1. Tome la posición de desplazamiento actual (¡no olvide el eje horizontal!).
  2. Establezca el desbordamiento en oculto (probablemente desee retener el valor de desbordamiento anterior).
  3. Desplace el documento a la posición de desplazamiento almacenada con scrollTo ().

Luego, cuando esté listo para permitir el desplazamiento de nuevo, deshaga todo eso.

Editar: no hay razón para que no pueda darte el código ya que me tomé la molestia de desenterrarlo …

 // lock scroll position, but retain settings for later var scrollPosition = [ self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ]; var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that html.data('scroll-position', scrollPosition); html.data('previous-overflow', html.css('overflow')); html.css('overflow', 'hidden'); window.scrollTo(scrollPosition[0], scrollPosition[1]); // un-lock scroll position var html = jQuery('html'); var scrollPosition = html.data('scroll-position'); html.css('overflow', html.data('previous-overflow')); window.scrollTo(scrollPosition[0], scrollPosition[1]) 

Esto deshabilitará completamente el desplazamiento:

 $('html, body').css({ overflow: 'hidden', height: '100%' }); 

Para restaurar:

 $('html, body').css({ overflow: 'auto', height: 'auto' }); 

Probado en Firefox y Chrome.

prueba esto

 $('#element').on('scroll touchmove mousewheel', function(e){ e.preventDefault(); e.stopPropagation(); return false; }) 

puedes usar este código:

 $("body").css("overflow", "hidden"); 

Solo proporciono un poco de ajuste a la solución por tfe . En particular, agregué un control adicional para garantizar que no haya ningún cambio en el contenido de la página (también conocido como cambio de página ) cuando la barra de desplazamiento está configurada como hidden .

Dos funciones de Javascript lockScroll() y unlockScroll() se pueden definir, respectivamente, para bloquear y desbloquear el desplazamiento de la página.

 function lockScroll(){ $html = $('html'); $body = $('body'); var initWidth = $body.outerWidth(); var initHeight = $body.outerHeight(); var scrollPosition = [ self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ]; $html.data('scroll-position', scrollPosition); $html.data('previous-overflow', $html.css('overflow')); $html.css('overflow', 'hidden'); window.scrollTo(scrollPosition[0], scrollPosition[1]); var marginR = $body.outerWidth()-initWidth; var marginB = $body.outerHeight()-initHeight; $body.css({'margin-right': marginR,'margin-bottom': marginB}); } function unlockScroll(){ $html = $('html'); $body = $('body'); $html.css('overflow', $html.data('previous-overflow')); var scrollPosition = $html.data('scroll-position'); window.scrollTo(scrollPosition[0], scrollPosition[1]); $body.css({'margin-right': 0, 'margin-bottom': 0}); } 

donde asumí que el no tiene margen inicial.

Tenga en cuenta que, si bien la solución anterior funciona en la mayoría de los casos prácticos, no es definitiva, ya que necesita una mayor personalización para las páginas que incluyen, por ejemplo, un encabezado con position:fixed . Veamos este caso especial con un ejemplo. Supongamos que tiene

     

con

 #header{position:fixed; padding:0; margin:0; width:100%} 

Entonces, uno debería agregar lo siguiente en las funciones lockScroll() y unlockScroll() :

 function lockScroll(){ //Omissis $('#header').css('margin-right', marginR); } function unlockScroll(){ //Omissis $('#header').css('margin-right', 0); } 

Finalmente, tenga en cuenta un posible valor inicial para los márgenes o los rellenos.

Para desactivar el desplazamiento, intente esto:

 var current = $(window).scrollTop(); $(window).scroll(function() { $(window).scrollTop(current); }); 

reiniciar:

 $(window).off('scroll'); 

He escrito un complemento jQuery para manejar esto: $ .disablescroll .

Impide el desplazamiento desde la rueda del mouse, el movimiento táctil y los eventos de pulsación de tecla, como AvPág.

Hay una demostración aquí .

Uso:

 $(window).disablescroll(); // To re-enable scrolling: $(window).disablescroll("undo"); 

Puede adjuntar una función para desplazar eventos y evitar su comportamiento predeterminado.

 var $window = $(window); $window.on("mousewheel DOMMouseScroll", onMouseWheel); function onMouseWheel(e) { e.preventDefault(); } 

https://jsfiddle.net/22cLw9em/

Un trazador de líneas para deshabilitar el desplazamiento incluido el botón central del mouse.

 $(document).scroll(function () { $(document).scrollTop(0); }); 

edit : no hay necesidad de jQuery de todos modos, debajo de lo mismo que arriba en JS vainilla (eso significa que no hay frameworks, solo JavaScript):

 document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; }) 

this.documentElement.scrollTop – estándar

this.body.scrollTop – Compatibilidad con IE

¿No puedes simplemente establecer la altura del cuerpo al 100% y el desbordamiento oculto? Ver http://jsbin.com/ikuma4/13/edit

Esto puede funcionar o no para sus propósitos, pero puede extender jScrollPane para activar otras funciones antes de que se desplace. Acabo de probar esto un poco, pero puedo confirmar que puedes saltar y evitar el desplazamiento por completo. Todo lo que hice fue:

  • Descargue el zip de demostración: http://github.com/vitch/jScrollPane/archives/master
  • Abra la demostración de “Eventos” (events.html)
  • Edítelo para utilizar el origen del script no minificado:
  • Dentro de jquery.jscrollpane.js, inserte un “retorno”; en la línea 666 (número de línea propicio! pero en el caso de que su versión difiera ligeramente, esta es la primera línea de la función positionDragY(destY, animate)

Arranca events.html, y verás un cuadro normalmente desplazable que debido a tu intervención de encoding no se desplazará.

Puede controlar las barras de desplazamiento de todo el navegador de esta manera (consulte fullpage_scroll.html).

Entonces, presumiblemente, el siguiente paso es agregar una llamada a alguna otra función que se active y haga su magia de anclaje, y luego decida si continuar con el desplazamiento o no. También tienes llamadas API para configurar scrollTop y scrollLeft.

Si desea más ayuda, publique dónde se encuentra.

Espero que esto haya ayudado.

Pongo una respuesta que podría ayudar aquí: jQuery simplemodal desactivar el desplazamiento

Muestra cómo desactivar las barras de desplazamiento sin cambiar el texto. Puede ignorar las partes sobre simplemodal.

Alguien publicó este código, que tiene el problema de no conservar la posición de desplazamiento cuando se restaura. La razón es que las personas tienden a aplicarlo a html y body o simplemente al cuerpo, pero solo debe aplicarse a html. De esta manera cuando se restaure la posición de desplazamiento se mantendrá:

 $('html').css({ 'overflow': 'hidden', 'height': '100%' }); 

Para restaurar:

 $('html').css({ 'overflow': 'auto', 'height': 'auto' }); 

Si solo desea deshabilitar el desplazamiento con la navegación por el teclado, puede anular el evento de selección.

 $(document).on('keydown', function(e){ e.preventDefault(); e.stopPropagation(); }); 

Prueba este código:

  $(function() { // ... var $body = $(document); $body.bind('scroll', function() { if ($body.scrollLeft() !== 0) { $body.scrollLeft(0); } }); // ... }); 
  • Ocultar Pergamino: $("body").css("overflow", "hidden");
  • Para restaurar el desplazamiento: $("body").css("overflow", "initial");

Puede ocultar la ventana con un div desplazable para evitar que se desplace el contenido de una página. Y, al ocultar y mostrar, puede bloquear / desbloquear su desplazamiento.

Haz algo como esto:

 #scrollLock { width: 100%; height: 100%; position: fixed; overflow: scroll; opacity: 0; display:none } #scrollLock > div { height: 99999px; } function scrollLock(){ $('#scrollLock').scrollTop('10000').show(); } function scrollUnlock(){ $('#scrollLock').hide(); } 

Para las personas que tienen diseños centrados (a través de margin:0 auto; ), aquí hay un mash-up de la position:fixed solución position:fixed junto con la solución propuesta de @tfe .

Utilice esta solución si experimenta chasquidos de página (debido a que la barra de desplazamiento muestra u oculta).

 // lock scroll position, but retain settings for later var scrollPosition = [ window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ]; var $html = $('html'); // bow to the demon known as MSIE(v7) $html.addClass('modal-noscroll'); $html.data('scroll-position', scrollPosition); $html.data('margin-top', $html.css('margin-top')); $html.css('margin-top', -1 * scrollPosition[1]); 

…combinado con…

 // un-lock scroll position var $html = $('html').removeClass('modal-noscroll'); var scrollPosition = $html.data('scroll-position'); var marginTop = $html.data('margin-top'); $html.css('margin-top', marginTop); window.scrollTo(scrollPosition[0], scrollPosition[1]) 

… y finalmente, el CSS para .modal-noscroll

 .modal-noscroll { position: fixed; overflow-y: scroll; width: 100%; } 

Me atrevería a decir que esto es más una solución adecuada que cualquiera de las otras soluciones, pero aún no lo he probado a fondo …: P


Editar: tenga en cuenta que no tengo idea de lo mal que podría funcionar (leer: explotar) en un dispositivo táctil.

También puedes usar DOM para hacerlo. Digamos que tienes una función que llamas así:

 function disable_scroll() { document.body.style.overflow="hidden"; } 

¡Y eso es todo! Espero que esto ayude además de todas las otras respuestas!

Esto es lo que terminé haciendo:

CoffeeScript:

  $("input").focus -> $("html, body").css "overflow-y","hidden" $(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) -> event.preventDefault() $("input").blur -> $("html, body").css "overflow-y","auto" $(document).off "scroll.stopped touchmove.stopped mousewheel.stopped" 

Javascript:

 $("input").focus(function() { $("html, body").css("overflow-y", "hidden"); $(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) { return event.preventDefault(); }); }); $("input").blur(function() { $("html, body").css("overflow-y", "auto"); $(document).off("scroll.stopped touchmove.stopped mousewheel.stopped"); }); 

No estoy seguro si alguien ha probado mi solución. Este funciona en todo el cuerpo / html, pero sin duda se puede aplicar a cualquier elemento que dispare un evento de desplazamiento.

Simplemente configure y desactive scrollLock como lo necesite.

 var scrollLock = false; var scrollMem = {left: 0, top: 0}; $(window).scroll(function(){ if (scrollLock) { window.scrollTo(scrollMem.left, scrollMem.top); } else { scrollMem = { left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop }; } }); 

Aquí está el ejemplo JSFiddle

Espero que esto ayude a alguien.

Creo que la mejor y más limpia solución es:

 window.addEventListener('scroll',() => { var x = window.scrollX; var y = window.scrollY; window.scrollTo(x,y); }); 

Y con jQuery:

 $(window).on('scroll',() => { var x = window.scrollX; var y = window.scrollY; window.scrollTo(x,y) }) 

Esos oyentes de eventos deben bloquear el desplazamiento. Solo elimínalos para volver a habilitar el desplazamiento