javascript - remove - this jquery

Solo desactiva el desplazamiento, no lo escondes?

Question

Intento desactivar la barra de desplazamiento html / body del padre mientras uso un lightbox. La palabra principal aquí es desactivar . No quiero ocultarlo con overflow: hidden; .

La razón de esto es que overflow: hidden hace que el sitio salte y ocupe el área donde estaba el scroll.

Quiero saber si es posible desactivar una barra de desplazamiento mientras todavía se muestra.

Answer 1

Con jQuery incluido:

inhabilitar

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on(''scroll.scrolldisabler'',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

habilitar

$.fn.enableScroll = function() {
    $(window).off(''scroll.scrolldisabler'');
};

uso

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();

Answer 2

Alternativamente, puede ocultar la barra de desplazamiento del cuerpo con overflow: hidden y establecer un margen al mismo tiempo para que el contenido no salte:

let marginRightPx = 0;
if(window.getComputedStyle) {
    let bodyStyle = window.getComputedStyle(document.body);
    if(bodyStyle) {
        marginRightPx = parseInt(bodyStyle.marginRight, 10);
    }
}

let scrollbarWidthPx = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
    overflow: ''hidden'',
    marginRight: `${marginRightPx + scrollbarWidthPx}px`
});

Y luego puede agregar una barra de desplazamiento deshabilitada a la página para completar el espacio:

textarea {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 11px;
  outline: none;
  resize: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
}

<textarea></textarea>

Hice exactamente esto para mi propia implementación de lightbox. Parece estar funcionando bien hasta ahora.

Answer 3

Cuatro pequeñas adiciones a la solución seleccionada:

1. Aplicar ''noscroll'' a html en lugar de al cuerpo para evitar barras de desplazamiento dobles en IE
2. Para verificar si realmente hay una barra de desplazamiento antes de agregar la clase ''noscroll''. De lo contrario, el sitio también saltará empujado por la nueva barra de desplazamiento sin desplazamiento.
3. Para mantener cualquier posible scrollTop, la página completa no volverá a la parte superior (como la actualización de Fabrizio, pero debe tomar el valor antes de agregar la clase ''noscroll'')
4. No todos los navegadores manejan scrollTop de la misma forma documentada en http://help.dottoro.com/ljnvjiow.php

Solución completa que parece funcionar para la mayoría de los navegadores:

CSS

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

Deshabilitar desplazamiento

if ($(document).height() > $(window).height()) {
     var scrollTop = ($(''html'').scrollTop()) ? $(''html'').scrollTop() : $(''body'').scrollTop(); // Works for Chrome, Firefox, IE...
     $(''html'').addClass(''noscroll'').css(''top'',-scrollTop);         
}

Habilitar desplazamiento

var scrollTop = parseInt($(''html'').css(''top''));
$(''html'').removeClass(''noscroll'');
$(''html,body'').scrollTop(-scrollTop);

Gracias a Fabrizio y Dejan por ponerme en el camino correcto y a Brodingo por la solución a la barra de desplazamiento doble

Answer 4

El modo crudo pero funcional será forzar el desplazamiento hacia atrás, lo que desactivará el desplazamiento:

var _stopScroll = false;
window.onload = function(event) {
    document.onscroll = function(ev) {
        if (_stopScroll) {
            document.body.scrollTop = "0px";
        }
    }
};

Cuando abra la caja de luz, levante la bandera y cuando la cierre, baje la bandera.

Caso de prueba en vivo .

Answer 5

Esta es la solución con la que fuimos. Simplemente guarde la posición de desplazamiento cuando se abre la plantilla, desplácese hacia atrás a la posición guardada cada vez que el usuario intente desplazarse por la página, y apague la función de escucha cuando se cierre la plantilla.

Es un poco nervioso en IE, pero funciona como un encanto en Firefox / Chrome.

var body = $("body"),
  overlay = $("#overlay"),
  overlayShown = false,
  overlayScrollListener = null,
  overlaySavedScrollTop = 0,
  overlaySavedScrollLeft = 0;

function showOverlay() {
  overlayShown = true;

  // Show overlay
  overlay.addClass("overlay-shown");

  // Save scroll position
  overlaySavedScrollTop = body.scrollTop();
  overlaySavedScrollLeft = body.scrollLeft();

  // Listen for scroll event
  overlayScrollListener = body.scroll(function() {
    // Scroll back to saved position
    body.scrollTop(overlaySavedScrollTop);
    body.scrollLeft(overlaySavedScrollLeft);
  });
}

function hideOverlay() {
  overlayShown = false;

  // Hide overlay
  overlay.removeClass("overlay-shown");

  // Turn scroll listener off
  if (overlayScrollListener) {
    overlayScrollListener.off();
    overlayScrollListener = null;
  }
}

// Click toggles overlay
$(window).click(function() {
  if (!overlayShown) {
    showOverlay();
  } else {
    hideOverlay();
  }
});

/* Required */
html, body { margin: 0; padding: 0; height: 100%; background: #fff; }
html { overflow: hidden; }
body { overflow-y: scroll; }

/* Just for looks */
.spacer { height: 300%; background: orange; background: linear-gradient(#ff0, #f0f); }
.overlay { position: fixed; top: 20px; bottom: 20px; left: 20px; right: 20px; z-index: -1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); overflow: auto; }
.overlay .spacer { background: linear-gradient(#88f, #0ff); }
.overlay-shown { z-index: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Top of page</h1>
<p>Click to toggle overlay. (This is only scrollable when overlay is <em>not</em> open.)</p>
<div class="spacer"></div>
<h1>Bottom of page</h1>
<div id="overlay" class="overlay">
  <h1>Top of overlay</h1>
  <p>Click to toggle overlay. (Containing page is no longer scrollable, but this is.)</p>
  <div class="spacer"></div>
  <h1>Bottom of overlay</h1>
</div>

Answer 6

Esto funcionó muy bien para mí ...

// disable scrolling
$(''body'').bind(''mousewheel touchmove'', lockScroll);

// enable scrolling
$(''body'').unbind(''mousewheel touchmove'', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

simplemente envuelva esas dos líneas de código con lo que decida cuando vaya a bloquear el desplazamiento.

p.ej

$(''button'').on(''click'', function() {
     $(''body'').bind(''mousewheel touchmove'', lockScroll);
});

Answer 7

Me gusta seguir el método de "desbordamiento: oculto" y simplemente agregar relleno-derecho que es igual al ancho de la barra de desplazamiento.

Obtener la función de ancho de barra de desplazamiento, por lostsource .

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

Al mostrar la superposición, agregue la clase "noscroll" a html y agregue relleno, de derecha a derecha:

$(html).addClass("noscroll");
$(body).css("paddingRight", getScrollbarWidth() + "px");

Cuando se esconde, elimine la clase y el relleno:

$(html).removeClass("noscroll");
$(body).css("paddingRight", 0);

El estilo de noscroll es solo esto:

.noscroll { overflow: hidden; }

Tenga en cuenta que si tiene elementos con posición: fijo, necesita agregar el relleno a esos elementos también.

Answer 8

No puede deshabilitar el evento de desplazamiento, pero puede deshabilitar las acciones relacionadas que conducen a un desplazamiento, como la rueda del mouse y el movimiento táctil:

$(''body'').on(''mousewheel touchmove'', function(e) {
      e.preventDefault();
});

Answer 9

Puedes hacerlo con Javascript:

// Classic JS
window.onscroll = function(ev) {
  ev.preventDefault();
}

// jQuery
$(window).scroll(function(ev) {
  ev.preventDefault();
}

Y luego deshabilítelo cuando su caja de luz esté cerrada.

Pero si su caja de luz contiene una barra de desplazamiento, no podrá desplazarse mientras está abierta. Esto se debe a que window contiene body y #lightbox . Entonces debes usar una arquitectura como la siguiente:

<body>
  <div id="global"></div>
  <div id="lightbox"></div>
</body>

Y luego aplique el evento onscroll solo en #global .

Answer 10

Si la página debajo de la superposición se puede "arreglar" en la parte superior, cuando abres la superposición puedes establecer

body { position: fixed; overflow-y:scroll }

aún debería ver la barra de desplazamiento derecha, pero el contenido no es desplazable. Cuando cierre la superposición simplemente revertir estas propiedades con

body { position: static; overflow-y:auto }

Acabo de proponer esta forma solo porque no necesitarías cambiar ningún evento de desplazamiento

Actualizar

También podría hacer una ligera mejora: si obtiene la propiedad document.documentElement.scrollTop través de javascript justo antes de abrir la capa, puede asignar dinámicamente ese valor como propiedad top del elemento del cuerpo: con este enfoque, la página se colocará en su lugar , no importa si estás arriba o si ya te has desplazado.

Css

.noscroll { position: fixed; overflow-y:scroll }

JS

$(''body'').css(''top'', -(document.documentElement.scrollTop) + ''px'')
         .addClass(''noscroll'');

Answer 11

Soy el OP

Con la ayuda de la respuesta de fcalderan, pude formar una solución. Dejo mi solución aquí ya que brinda claridad sobre cómo usarla, y agrega un detalle muy crusal, width: 100%;

Agrego esta clase

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

esto funcionó para mí y estaba usando Fancyapp.

Answer 12

Tuve un problema similar: un menú de la izquierda que, cuando aparece, impide el desplazamiento. Tan pronto como la altura se estableció en 100vh, la barra de desplazamiento desapareció y el contenido se sacudió hacia la derecha.

Entonces, si no le importa mantener activada la barra de desplazamiento (pero ajustando la ventana a una altura completa para que no se desplace en ningún lugar), entonces otra posibilidad es establecer un pequeño margen inferior, que mantendrá las barras de desplazamiento que muestran:

body {
    height: 100vh;
    overflow: hidden;
    margin: 0 0 1px;
}

Answer 13

puede mantener el desbordamiento: oculto pero administre la posición de desplazamiento manualmente:

antes de mostrar mantener el rastro de la posición de desplazamiento real:

var scroll = [$(document).scrollTop(),$(document).scrollLeft()];
//show your lightbox and then reapply scroll position
$(document).scrollTop(scroll[0]).scrollLeft(scroll[1]);

deberia de funcionar

Answer 14

<div id="lightbox"> está dentro del elemento <body> , por lo tanto, cuando se desplaza por el lightbox, también se desplaza por el cuerpo. La solución es no extender el elemento <body> más del 100%, colocar el contenido largo dentro de otro elemento div y agregar una barra de desplazamiento si es necesario a este elemento div con overflow: auto .

html {
  height: 100%
}
body {
  margin: 0;
  height: 100%
}
#content {
  height: 100%;
  overflow: auto;
}
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<html>
  <body>
    <div id="content">much content</div>
    <div id="lightbox">lightbox<div>
  </body>
</html>

Ahora, desplazarse sobre la caja de luz (y el body también) no tiene ningún efecto, porque el cuerpo no supera el 100% de la altura de la pantalla.