vanilla - scroll jquery ejemplos

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

Question

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.

Answer 1

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

Answer 2

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''
});

Answer 3

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.

Answer 4

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");
});

Answer 5

Esto puede funcionar o no para sus propósitos, pero puede extender jScrollPane para jScrollPane 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: <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 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 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 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.

Answer 6

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");

Answer 7

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])

Answer 8

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.

Answer 9

Para desactivar el desplazamiento, intente esto:

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

reiniciar:

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

Answer 10

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.

Answer 11

Prueba este código:

    $(function() { 
        // ...

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

        // ...
    });

Answer 12

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/

Answer 13

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();
}

Answer 14

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();
});

Answer 15

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 <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 . Veamos este caso especial con un ejemplo. Supongamos que tiene

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

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.

Answer 16

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!

Answer 17

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

Answer 18

prueba esto

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

Answer 19

puedes usar este código:

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

Answer 20

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.

Answer 21

• Ocultar Pergamino: $("body").css("overflow", "hidden");
• Para restaurar el desplazamiento: $("body").css("overflow", "initial");