Cómo deshabilitar programáticamente el desplazamiento de página con jQuery
Usando jQuery, me gustaría deshabilitar el desplazamiento del cuerpo:
Mi idea es:
- Sep
body{ overflow: hidden;} - Captura la corriente
scrollTop();/scrollLeft() - 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 estará pensando "¿por qué no usa position: fixed en el panel? ".
Por favor, no sugiera esto porque tengo otras razones.
preguntado el 07 de septiembre de 10 a las 04:09
Hailwood
24 Respuestas
La única forma que encontré para hacer esto es similar a lo que describiste:
- Tome la posición de desplazamiento actual (¡no olvide el eje horizontal!).
- Establezca el desbordamiento en oculto (probablemente desee conservar el valor de desbordamiento anterior).
- Desplace el documento a la posición de desplazamiento almacenada con scrollTo ().
Luego, cuando esté listo para permitir el desplazamiento nuevamente, deshaga todo eso.
Editar: no hay razón por la 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])
respondido 13 mar '16, 22:03
por favor mira jsbin.com/ikuma4/2/editar y explícame alguna razón que la tuya es mejor? ¿Me estoy perdiendo algo (pregunto porque no veo ninguna razón para la longitud de su respuesta en comparación con mi ejemplo)? Granizo
Su enfoque no funciona en IE7. También probé eso primero. El problema es que no reacciona al evento de desplazamiento con la suficiente rapidez. Permite que el documento se desplace, luego lo vuelve a ajustar cuando su JS restablece la posición de desplazamiento donde lo desea. - tfe
Además, si el cuerpo tuviera un desbordamiento de algo más que auto, se sobrescribirá. Necesitaba preservar la configuración existente, por lo que eso también agrega algunos gastos generales. - tfe
¿Alguien sabe por qué simplemente peinar html e body overflow: hidden ¿es insuficiente? Todavía terminamos necesitando el controlador de eventos. - kpozín
Esto se completamente deshabilitar el desplazamiento:
$('html, body').css({
overflow: 'hidden',
height: '100%'
});
Para restaurar:
$('html, body').css({
overflow: 'auto',
height: 'auto'
});
Lo probé en Firefox y Chrome.
respondido 04 nov., 16:13
funciona como se esperaba. ¡Gracias! ¡Esta debería haber sido la respuesta aceptada! - David Chen
Aún se desplaza con el botón central del mouse en cromo. - Lothar
Esto pierde la posición de desplazamiento actual. OP mencionó explícitamente acerca de capturar la posición de desplazamiento, así que supongo que lo requería. De todos modos, lo necesito, así que esto es de uso limitado para mí. cero
PS Omitiendo el height: 100% bloquea efectivamente el desplazamiento en la posición actual sin saltar, al menos en la última versión de Chrome. - cero
Ésta NO es la respuesta correcta. La posición de desplazamiento no se captura - Taylorcressy
prueba este
$('#element').on('scroll touchmove mousewheel', function(e){
e.preventDefault();
e.stopPropagation();
return false;
})
Respondido el 20 de junio de 14 a las 09:06
justo lo que estaba buscando ... casi. De todos modos, ¿deshabilitarlo durante las teclas de flecha? - Cody
@Cody - combine esto con css overflow: hidden - Dariux
@cubbiu ¿cómo revertirlo? - más
Puedes usar $('#element').off('scroll touchmove mousewheel'); - arnuschky
Gran solucion. Aunque, ¿cómo solo inhabilitarías body desplazamiento pero permite desplazarse dentro de otros elementos secundarios que tienen overflow: scroll? - Fizzix
Solo proporciono un pequeño ajuste a la solución al tfe. En particular, agregué algún control adicional para asegurar que haya sin cambios en el contenido de la página (también llamado cambio de página) cuando la barra de desplazamiento se establece en hidden.
Dos funciones de Javascript lockScroll() e unlockScroll() pueden definirse, respectivamente, para bloquear y desbloquear el desplazamiento de 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 <body> 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. Entremos en este caso especial con un ejemplo. Suponga tener
<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>
#header{position:fixed; padding:0; margin:0; width:100%}
Entonces, uno debe agregar lo siguiente en funciones lockScroll() e unlockScroll():
function lockScroll(){
//Omissis
$('#header').css('margin-right', marginR);
}
function unlockScroll(){
//Omissis
$('#header').css('margin-right', 0);
}
Finalmente, tenga en cuenta algún posible valor inicial para los márgenes o rellenos.
contestado el 23 de mayo de 17 a las 13:05
puedes usar este código:
$("body").css("overflow", "hidden");
Respondido 07 Oct 12, 10:10
Aún puede usar el botón central del mouse para desplazarse. - roger lejos
No, ¡esto está bien y no hay desplazamiento con esto! - señor soroush
Si usa un CSS adicional, PUEDE deshabilitar completamente el desplazamiento, consulte mi respuesta para obtener más detalles. - gitaarik
Para desactivar el desplazamiento, intente esto:
var current = $(window).scrollTop();
$(window).scroll(function() {
$(window).scrollTop(current);
});
reiniciar:
$(window).off('scroll');
Respondido 10 Abr '15, 15:04
Esta fue una solución fantástica para lo que necesitaba. - Terry Carter
@EveryScreamer no, hace que la pantalla se mueva como loca. Tratando de encontrar una solución. - Telariano
Escribí un complemento de jQuery para manejar esto: $ .disablescroll.
Evita el desplazamiento desde la rueda del mouse, touchmove y eventos de pulsación de teclas, como Page Down.
Hay una demo aquí.
Uso:
$(window).disablescroll();
// To re-enable scrolling:
$(window).disablescroll("undo");
respondido 28 mar '14, 12:03
Intenté usar su complemento disablescroll () para deshabilitar temporalmente el desplazamiento al escuchar el evento de rueda de ratón / desplazamiento, pero no funciona. ¿Alguna posibilidad de que conozcas una forma de lograr ese efecto? - santo amarillo
@JB Probablemente pueda ayudar, pero los comentarios no son el mejor lugar. Únase a mí en este chat de desbordamiento de pila y veré qué puedo hacer: chat.stackoverflow.com/rooms/55043/disablescroll-usage - jose harrison
Lo siento, pero este complemento ni siquiera funciona en tu jsfiddle. - Markj
¿Puede ayudarme a inspeccionar esto diciéndome en qué navegador / plataforma no parece funcionar, por favor? - jose harrison
Puede adjuntar una función para desplazarse por eventos y evitar su comportamiento predeterminado.
var $window = $(window);
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
function onMouseWheel(e) {
e.preventDefault();
}
Respondido el 18 de junio de 16 a las 12:06
Esta es la respuesta correcta. No sé por qué no está configurado como tal Guilherme Ferreira
Funciona. Solo necesita el código de reinicio publicado para que coincida Patricks responde - Hastig Zusammenstellen
Un trazador de líneas para deshabilitar el desplazamiento, incluido el botón central del mouse.
$(document).scroll(function () { $(document).scrollTop(0); });
editar: No hay necesidad de jQuery de todos modos, a continuación, igual que arriba en Vanilla JS (eso significa que no hay marcos, 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
respondido 13 mar '16, 22:03
- Para ocultar el desplazamiento:
$("body").css("overflow", "hidden"); - Para restaurar el desplazamiento:
$("body").css("overflow", "initial");
Respondido 18 Oct 17, 22:10
¿No puede simplemente establecer la altura del cuerpo al 100% y el desbordamiento oculto? Ver http://jsbin.com/ikuma4/13/edit
contestado el 17 de mayo de 11 a las 06:05
$ ("html"). css ({altura: '100%', desbordamiento: 'oculto'}); Simplemente funciona, gracias Adrian. Alexey
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 la gente tiende a aplicarlo a html y body o solo al body, pero debe aplicarse solo a html. De esta forma cuando se restaure la posición de desplazamiento se mantendrá:
$('html').css({
'overflow': 'hidden',
'height': '100%'
});
Para restaurar:
$('html').css({
'overflow': 'auto',
'height': 'auto'
});
Respondido el 07 de Septiembre de 15 a las 16:09
Esto puede funcionar o no para sus propósitos, pero puede extender jPanel de desplazamiento para disparar otras funciones antes de que haga su desplazamiento. Solo he probado 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 usar la fuente de secuencia de comandos no minimizada:
<script type="text/javascript" src="script/jquery.jscrollpane.js"></script> - Dentro de jquery.jscrollpane.js, inserte un "retorno;" en la línea 666 (¡número de línea auspicioso! pero en caso de que su versión difiera ligeramente, esta es la primera línea del
positionDragY(destY, animate)función
Inicie events.html y verá un cuadro de desplazamiento normal que, debido a su intervención de codificación, 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 apaga y hace su magia de anclaje, luego decide si continuar con el desplazamiento o no. También tiene llamadas a la API para configurar scrollTop y scrollLeft.
Si desea más ayuda, publique donde quiera.
Espero que esto haya ayudado.
contestado el 17 de mayo de 11 a las 06:05
Pongo una respuesta que podría ayudar aquí: jQuery simplemodal deshabilitar el desplazamiento
Muestra cómo desactivar las barras de desplazamiento sin cambiar el texto. Puede ignorar las partes sobre modalidad simple.
contestado el 23 de mayo de 17 a las 13:05
Si solo desea deshabilitar el desplazamiento con la navegación del teclado, puede anular el evento de pulsación de tecla.
$(document).on('keydown', function(e){
e.preventDefault();
e.stopPropagation();
});
Respondido 27 Jul 15, 14:07
Pruebe este código:
$(function() {
// ...
var $body = $(document);
$body.bind('scroll', function() {
if ($body.scrollLeft() !== 0) {
$body.scrollLeft(0);
}
});
// ...
});
Respondido el 28 de junio de 16 a las 02:06
Puede cubrir la ventana con un div desplazable para evitar el desplazamiento del contenido en una página. Y, al ocultar y mostrar, puede bloquear / desbloquear su pergamino.
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();
}
Respondido 16 Oct 12, 00:10
No utilice abreviaturas como "u" y "smth". Tómese el tiempo para deletrear correctamente, para mayor legibilidad. - el hombre de hojalata
Para las personas que tienen diseños centrados (a través de margin:0 auto;), aquí hay una combinación de position:fixed solución junto con @tfepropuesta de solución.
Utilice esta solución si está experimentando un salto de página (debido a que la barra de desplazamiento se muestra / 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 esta es una solución más adecuada que cualquiera de las otras soluciones que existen, pero no la he probado. esta completamente todavía…: P
Editar: tenga en cuenta que no tengo ni idea de qué tan mal podría funcionar esto (léase: explotar) en un dispositivo táctil.
Respondido 17 Abr '13, 02:04
También puede usar DOM para hacerlo. Digamos que tiene una función a la que llama así:
function disable_scroll() {
document.body.style.overflow="hidden";
}
¡Y eso es todo! ¡Espero que esto ayude además de todas las otras respuestas!
Respondido 30 Abr '14, 22:04
Esto es lo que terminé haciendo:
Guión de café:
$("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");
});
Respondido 21 Jul 14, 07:07
No estoy seguro de si alguien ha probado mi solución. Este funciona en todo el cuerpo / html, pero sin duda se puede aplicar a cualquier elemento que active un evento de desplazamiento.
Simplemente configure y desarme scrollLock según 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
};
}
});
Este es el ejemplo JSFiddle
Espero que este ayude a alguien.
respondido 20 nov., 14:09
Éste funciona como debería, con una excepción. Cuando el pergamino está bloqueado y yo me desplazo, se mueve un poco antes de bloquear el pergamino ... Tomas Teilmann
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 deberían bloquear el desplazamiento. Simplemente elimínelos para volver a habilitar el desplazamiento
Respondido el 20 de junio de 18 a las 14:06
Estoy usando el siguiente código para deshabilitar el desplazamiento y funciona bien
$('html').css({
'overflow': 'hidden',
'height': '100%'
});
excepto que en mi tableta Android, la barra de direcciones URL y las etiquetas de la ventana superior permanecen visibles, y cuando los usuarios se desplazan hacia arriba y hacia abajo, la ventana también se desplaza unos 40px hacia arriba y hacia abajo, y muestra / oculta la barra de URL y las etiquetas. ¿Hay alguna forma de evitarlo y tener el desplazamiento completamente desactivado?
respondido 08 nov., 20:19
Si desea deshabilitar el desplazamiento mediante programación, puede usar:
overflow: clip;
Si desea deshabilitar el desplazamiento para el usuario, puede usar:
overflow: hidden;
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
El navegador compatible con desbordarse la propiedad varía:
Respondido 20 Abr '21, 16:04
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery css scroll or haz tu propia pregunta.
"¿Hay una mejor manera?" - ¿además de permitir que el navegador se comporte normalmente? - Fenton
"melodramáticamente"? - Mike Weller
¿Quizás significó programáticamente? Dado que es la principal sugerencia de corrección ortográfica de Firefox para 'programáticamente' - Michael Shimmins
Este hilo va \ b \ - Cipi
@Sohnee deshabilitando el desplazamiento! == malo - Mansiemans