Cómo desactivar mediante programación el desplazamiento de páginas con jQuery

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

Mi idea es:

  1. Set body{ overflow: hidden;}
  2. Captura la corriente scrollTop();/scrollLeft()
  3. Enlazar al evento de desplazamiento del cuerpo, establecer scrollTop/scrollLeft al valor capturado.

Hay una manera mejor?

Actualización:

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

Soy consciente de que alguien estará pensando "¿por qué no usar simplemente position: fixed en el panel?".

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

Author: JeanValjean, 2010-09-07
Source

22 answers

La única manera que he encontrado para hacer esto es similar a lo que describiste:

  1. Toma la posición de desplazamiento actual (¡no olvides el eje horizontal!).
  2. Establezca overflow en hidden (probablemente desee conservar el valor de overflow anterior).
  3. Desplace el documento a la posición de desplazamiento almacenada con scrollTo().

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

Edit: 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])
 119
Author: tfe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-13 22:25:04

Esto completamente desactivar el desplazamiento: 

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

Para restaurar: 

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

Probado en Firefox y Chrome.

 197
Author: gitaarik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-04 13:47:27

Prueba esto

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})
 41
Author: cubbiu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-20 08:07:32

Puedes usar este código: 

$("body").css("overflow", "hidden");
 26
Author: mr.soroush,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-07 09:05:51

Solo proporciono un poco de ajuste a la solución por tfe. En particular, he añadido un control adicional para asegurar que no hay ningún desplazamiento del contenido de la página (también conocido como page shift) cuando la barra de desplazamiento se establece en hidden.

Se pueden definir dos funciones de Javascript lockScroll() y unlockScroll(), 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 <body> no tiene margen inicial.

Observe que, mientras que el anterior la solución funciona en la mayoría de los casos prácticos, no es definitiva ya que necesita más personalización para páginas que incluyen, por ejemplo, un encabezado con position:fixed. Vamos a entrar en este caso especial con un ejemplo. Se supone que tiene

<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>

Con 

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

Entonces, uno debe agregar lo siguiente en funciones lockScroll() y unlockScroll(): 

function lockScroll(){
    //Omissis   


    $('#header').css('margin-right', marginR);
} 

function unlockScroll(){
    //Omissis   

    $('#header').css('margin-right', 0);
}

Finalmente, tenga cuidado de algún posible valor inicial para los márgenes o rellenos.

 24
Author: JeanValjean,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:43

Para desactivar el desplazamiento, prueba esto: 

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

Para restablecer: 

$(window).off('scroll');
 16
Author: Patrick DaVader,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-10 14:31:44

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

Evita el desplazamiento de los eventos mousewheel, touchmove y keypress, como Page Down.

Hay un demo aquí.

Uso: 

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");
 5
Author: Josh Harrison,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-28 12:08:45

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 /

 5
Author: dzimi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-18 11:41:53

Un trazador de líneas para desactivar el desplazamiento incluyendo el botón central del ratón.

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

Edit: No hay necesidad de jQuery de todos modos, abajo igual que arriba en vanilla JS (eso significa que no hay frameworks, solo JavaScript): 

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

Esto.documentElement.scrollTop-estándar

Esto.cuerpo.scrollTop-IE compatibilidad

 4
Author: Pawel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-13 22:21:25

¿No puedes simplemente establecer la altura del cuerpo en 100% y desbordamiento oculto? Véase http://jsbin.com/ikuma4/13/edit

 3
Author: Adrian Schmidt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-05-17 05:59:19

Esto puede o no funcionar para sus propósitos, pero puede extender JScrollPane para activar otra funcionalidad antes de que haga su desplazamiento. Solo he probado esto un poco, pero puedo confirmar que puede saltar y evitar el desplazamiento por completo. Todo lo que hice fue:

  • Descargar la demo zip: http://github.com/vitch/jScrollPane/archives/master
  • Abra la demo "Eventos" (eventos.html)
  • Edítelo para usar la fuente de script no minificada: <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 de la función positionDragY(destY, animate)

Enciende eventos.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 algún otro función que se apaga y hace su magia de anclaje, luego decide si continuar con el desplazamiento o no. También tienes llamadas a la API para configurar scrollTop y scrollLeft.

Si quieres más ayuda, publicar donde te levantas!

Espero que esto haya ayudado.

 2
Author: Jeremy Warne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-05-17 05:37:12

Puse 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.

 2
Author: mhenry1384,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:54

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

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

Para restaurar: 

$('html').css({
    'overflow': 'auto',
    'height': 'auto'
});
 2
Author: Mescalina,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-07 15:48:27
  • Para Ocultar el Desplazamiento: $("body").css("overflow", "hidden");
  • Para Restaurar el Desplazamiento: $("body").css("overflow", "initial");
 2
Author: Joan Alberto Aguilar Peña,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-18 21:34:46

Si solo desea desactivar el desplazamiento con la navegación del teclado, puede anular el evento keydown.

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});
 1
Author: sean,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-27 13:14:45

Prueba este código: 

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });
 1
Author: Jopie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-28 01:39:16

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

Haga 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();
}
 0
Author: Appex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-15 23:07:09

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

Use esta solución si está experimentando un ajuste de página (debido a la barra de desplazamiento que 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]);

Combined 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 por ahí, pero no lo he probado que a fondo sin embargo P: P

Editar: tenga en cuenta que no tengo ni idea de lo mal que esto podría realizar (leer: blow up) en un dispositivo táctil.

 0
Author: Matthematics,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-17 01:59:48

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

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

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

 0
Author: Brendan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-30 21:52:53

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");
});
 0
Author: Marz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-21 06:37:11

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 dispare un evento de desplazamiento.

Simplemente configure y desactive 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
        };
    }
});

Aquí está el ejemplo JSFiddle

Espero que este ayude a alguien.

 0
Author: FossilMFC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-20 09:40:51

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. Simplemente elimínelos para volver a habilitar el desplazamiento

 0
Author: Tiziano,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-20 13:36:56