He estado buscando una solución de tipo "caja de luz" que permita esto, pero aún no he encontrado una (por favor, sugiera si conoce alguna).

El comportamiento que intento recrear es como el que verías en Pinterest al hacer clic en una imagen. La superposición es desplazable ( como en toda la superposición se mueve hacia arriba como una página en la parte superior de una página ) pero el cuerpo detrás de la superposición está fijo.

Intenté crear esto solo con CSS ( es decir, una divsuperposición en la parte superior de toda la página y el cuerpooverflow: hidden ), pero no impide que se divpueda desplazar.

¿Cómo evitar que el cuerpo / página se desplace pero siga desplazándose dentro del contenedor de pantalla completa?

Teoría

Al observar la implementación actual del sitio pinterest (puede cambiar en el futuro), cuando abre la superposición noscroll, se aplica una clase al bodyelemento y overflow: hiddense establece, por bodylo que ya no se puede desplazar.

La superposición (creado en la marcha o ya dentro de la página y se hace visible a través display: block, no hay diferencia) tiene position : fixedy overflow-y: scroll, con top, left, righty bottompropiedades definidas 0: este estilo hace que la superposición de llenar toda la ventana gráfica.

El divinterior de la superposición está en su lugar justo position: staticentonces, la barra de desplazamiento vertical que ves está relacionada con ese elemento. Como resultado, el contenido es desplazable pero la superposición permanece fija.

Cuando cierra el zoom, oculta la superposición (a través de display: none) y luego también puede eliminarla por completo a través de javascript (o solo el contenido dentro, depende de usted cómo inyectarlo).

Como paso final, también debe eliminar la noscrollclase body(para que la propiedad de desbordamiento vuelva a su valor inicial)

Código

Ejemplo de Codepen

(funciona cambiando el aria-hiddenatributo de la superposición para mostrarlo y ocultarlo y aumentar su accesibilidad).

Marcado
(botón de apertura)

<button type="button" class="open-overlay">OPEN LAYER</button>

(botón de superposición y cierre)

<section class="overlay" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>

CSS

.noscroll { 
  overflow: hidden;
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   top: 0; right: 0; bottom: 0; left: 0; }

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }

Javascript (vanilla-JS)

var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() { 

     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';

     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);

     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;

  }, false);

});

Finalmente, aquí hay otro ejemplo en el que la superposición se abre con un efecto de desvanecimiento por un CSS transitionaplicado a la opacitypropiedad. También padding-rightse aplica a para evitar un reflujo en el texto subyacente cuando la barra de desplazamiento desaparece.

Ejemplo de codepen (desvanecimiento)

CSS

.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
    /* not strictly necessary, just an experiment for 
       this specific example and couldn't be necessary 
       at all on some browser */
    .noscroll { 
        padding-right: 15px;
    }
}

.overlay { 
     position: fixed; 
     overflow-y: scroll;
     top: 0; left: 0; right: 0; bottom: 0;
}

[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}

Si desea evitar el desplazamiento excesivo en ios, puede agregar una posición fija a su clase .noscroll

body.noscroll{
    position:fixed;
    overflow:hidden;
}

No utilice overflow: hidden;el body. Desplaza automáticamente todo a la parte superior. No hay necesidad de JavaScript tampoco. Hacer uso deoverflow: auto; . Esta solución incluso funciona con Safari móvil:

Estructura HTML

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

Estilo

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

Vea la demostración aquí y el código fuente aquí .

Actualizar:

Para las personas que desean la barra espaciadora del teclado, la página arriba / abajo funciona: debe enfocarse en la superposición, por ejemplo, hacer clic en ella, o JS se enfoca manualmente antes de que esta parte del divteclado responda. Lo mismo ocurre cuando la superposición está "apagada", ya que solo está moviendo la superposición hacia un lado. De lo contrario para el navegador, estos son solo dos divs normales y no sabría por qué debería centrarse en ninguno de ellos.

overscroll-behavior La propiedad css permite anular el comportamiento de desplazamiento de desbordamiento predeterminado del navegador al llegar a la parte superior / inferior del contenido.

Simplemente agregue los siguientes estilos para superponer:

.overlay {
   overscroll-behavior: contain;
   ...
}

Codepen demo

Actualmente funciona en Chrome, Firefox e IE ( caniuse )

Para más detalles, consulte el artículo de desarrolladores de Google .

La mayoría de las soluciones tienen el problema de que no retienen la posición de desplazamiento, así que eché un vistazo a cómo lo hace Facebook. Además de configurar el contenido subyacente position: fixed, también configuran la parte superior dinámicamente para mantener la posición de desplazamiento:

scrollPosition = window.pageYOffset;
mainEl.style.top = -scrollPosition + 'px';

Luego, cuando elimine la superposición nuevamente, debe restablecer la posición de desplazamiento:

window.scrollTo(0, scrollPosition);

Creé un pequeño ejemplo para demostrar esta solución

let overlayShown = false;
let scrollPosition = 0;

document.querySelector('.toggle').addEventListener('click', function() {
  if (overlayShown) {
		showOverlay();
  } else {
    removeOverlay();
  }
  overlayShown = !overlayShown;
});

function showOverlay() {
    scrollPosition = window.pageYOffset;
  	const mainEl = document.querySelector('.main-content');
    mainEl.style.top = -scrollPosition + 'px';
  	document.body.classList.add('show-overlay');
}

function removeOverlay() {
		document.body.classList.remove('show-overlay');
  	window.scrollTo(0, scrollPosition);
    const mainEl = document.querySelector('.main-content');
    mainEl.style.top = 0;
}

.main-content {
  background-image: repeating-linear-gradient( lime, blue 103px);
  width: 100%;
  height: 200vh;
}

.show-overlay .main-content {
  position: fixed;
  left: 0;
  right: 0;
  overflow-y: scroll; /* render disabled scroll bar to keep the same width */
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: auto;
}

.show-overlay .overlay {
  display: block;
}

.overlay-content {
  margin: 50px;
  background-image: repeating-linear-gradient( grey, grey 20px, black 20px, black 40px);
  height: 120vh;
}

.toggle {
  position: fixed;
  top: 5px;
  left: 15px;
  padding: 10px;
  background: red;
}

/* reset CSS */
body {
  margin: 0;
}

<main class="main-content"></main>

  <div class="overlay">
    <div class="overlay-content"></div>
  </div>
  
  <button class="toggle">Overlay</button>

Vale la pena señalar que a veces agregar "desbordamiento: oculto" a la etiqueta del cuerpo no funciona. En esos casos, también deberá agregar la propiedad a la etiqueta html.

html, body {
    overflow: hidden;
}

En términos generales, si desea que un padre (el cuerpo en este caso) evite que se desplace cuando un niño (la superposición en este caso) se desplaza, entonces haga que el niño sea hermano del padre para evitar que el evento de desplazamiento aumente el padre. En el caso de que el padre sea el cuerpo, esto requiere un elemento de envoltura adicional:

<div id="content">
</div>
<div id="overlay">
</div>

Consulte Desplazar contenidos DIV particulares con la barra de desplazamiento principal del navegador para ver su funcionamiento.

La respuesta elegida es correcta, pero tiene algunas limitaciones:

• Los "lanzamientos" súper duros con el dedo aún se desplazarán <body>en el fondo
• Al abrir el teclado virtual tocando un <input>en el modal, todos los desplazamientos futuros se dirigirán a<body>

No tengo una solución para el primer problema, pero quería arrojar algo de luz sobre el segundo. Confusamente, Bootstrap solía documentar el problema del teclado, pero afirmaron que se solucionó, citando http://output.jsbin.com/cacido/quiet como un ejemplo de la solución.

De hecho, ese ejemplo funciona bien en iOS con mis pruebas. Sin embargo, actualizarlo al último Bootstrap (v4) lo rompe.

En un intento por descubrir cuál era la diferencia entre ellos, reduje un caso de prueba para que ya no dependiera de Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG .

Los factores decisivos son extraños. Evitar el problema del teclado parece requerir que background-color no se establezca en la raíz que <div>contiene el modal y el contenido del modal debe estar anidado en otro <div>, que puede haber background-colorestablecido.

Para probarlo, descomente la línea siguiente en el ejemplo de Codepen:

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* UNCOMMENT TO BREAK */
/*   background-color: white; */
}

Para dispositivos táctiles, intente agregar un 101vhdiv transparente de 1px de ancho y altura mínima en la envoltura de la superposición. Luego añade-webkit-overflow-scrolling:touch; overflow-y: auto; al envoltorio. Esto engaña al safari móvil para que piense que la superposición es desplazable, interceptando así el evento táctil del cuerpo.

Aquí hay una página de muestra. Abrir en safari móvil: http://www.originalfunction.com/overlay.html

https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f

El comportamiento que desea evitar se llama encadenamiento de desplazamiento. Para deshabilitarlo, establezca

overscroll-behavior: contain;

en tu superposición en CSS.

Encontré esta pregunta tratando de resolver el problema que tenía con mi página en Ipad y Iphone: el cuerpo se desplazaba cuando mostraba div fijo como ventana emergente con imagen.

Algunas respuestas son buenas, sin embargo, ninguna de ellas resolvió mi problema. Encontré la siguiente publicación de blog de Christoffer Pettersson. La solución presentada allí ayudó al problema que tenía con los dispositivos iOS y ayudó a mi problema de fondo de desplazamiento.

Seis cosas que aprendí sobre el desplazamiento de la banda de goma de iOS Safari

Como se sugirió, incluyo los puntos principales de la publicación del blog en caso de que el enlace quede desactualizado.

"Para deshabilitar que el usuario pueda desplazarse por la página de fondo mientras el" menú está abierto ", es posible controlar qué elementos deben permitirse desplazarse o no, aplicando JavaScript y una clase CSS.

Según esta respuesta de Stackoverflow , puede controlar que los elementos con el desplazamiento de desactivación no realicen su acción de desplazamiento predeterminada cuando se activa el evento de movimiento táctil ".

 document.ontouchmove = function ( event ) {

    var isTouchMoveAllowed = true, target = event.target;

    while ( target !== null ) {
        if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) {
            isTouchMoveAllowed = false;
            break;
        }
        target = target.parentNode;
    }

    if ( !isTouchMoveAllowed ) {
        event.preventDefault();
    }
};

Y luego coloque la clase de desplazamiento de desactivación en la página div:

<div class="page disable-scrolling">

Puede hacerlo fácilmente con algunos "nuevos" css y JQuery.

Inicialmente: body {... overflow:auto;} con JQuery puede cambiar dinámicamente entre 'superposición' y 'cuerpo'. Cuando esté en 'cuerpo', use

body {
   position: static;
   overflow: auto;
}

Cuando está en uso 'superpuesto'

body {
   position: sticky;
   overflow: hidden;
}

JQuery para el conmutador ('cuerpo' -> 'superposición'):

$("body").css({"position": "sticky", "overflow": "hidden"});

JQuery para el conmutador ('superposición' -> 'cuerpo'):

$("body").css({"position": "static", "overflow": "auto"});

Me gustaría agregar a las respuestas anteriores porque intenté hacer eso, y algunos diseños se rompieron tan pronto como cambié el cuerpo a la posición: fijo. Para evitar eso, también tuve que establecer la altura del cuerpo al 100%:

function onMouseOverOverlay(over){
    document.getElementsByTagName("body")[0].style.overflowY = (over?"hidden":"scroll");
    document.getElementsByTagName("html")[0].style.position = (over?"fixed":"static");
    document.getElementsByTagName("html")[0].style.height = (over?"100%":"auto");
}

Use el siguiente HTML:

<body>
  <div class="page">Page content here</div>
  <div class="overlay"></div>
</body>

Luego JavaScript para interceptar y detener el desplazamiento:

$(".page").on("touchmove", function(event) {
  event.preventDefault()
});

Luego, para que las cosas vuelvan a la normalidad:

$(".page").off("touchmove");

Si la intención es deshabilitar en dispositivos móviles / táctiles, entonces la forma más sencilla de hacerlo es mediante el uso touch-action: none;.

Ejemplo:

const app = document.getElementById('app');
const overlay = document.getElementById('overlay');

let body = '';

for (let index = 0; index < 500; index++) {
  body += index + '<br />';
}

app.innerHTML = body;
app.scrollTop = 200;

overlay.innerHTML = body;

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#app {
  background: #f00;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  line-height: 20px;
}

#overlay {
  background: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0 0 0 100px;
  overflow: scroll;
}

<div id='app'></div>
<div id='overlay'></div>

(El ejemplo no funciona en el contexto de Desbordamiento de pila. Deberá volver a crearlo en una página independiente).

Si desea deshabilitar el desplazamiento del #appcontenedor, simplemente agregue touch-action: none;.

prueba esto

var mywindow = $('body'), navbarCollap = $('.navbar-collapse');    
navbarCollap.on('show.bs.collapse', function(x) {
                mywindow.css({visibility: 'hidden'});
                $('body').attr("scroll","no").attr("style", "overflow: hidden");
            });
            navbarCollap.on('hide.bs.collapse', function(x) {
                mywindow.css({visibility: 'visible'});
                $('body').attr("scroll","yes").attr("style", "");
            });

Si desea detener el desplazamiento del cuerpo / html, agregue lo siguiente

CSS

    html, body {
        height: 100%;
    }

    .overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);

        .overlay-content {
            height: 100%;
            overflow: scroll;
        }
    }

    .background-content{
        height: 100%;
        overflow: auto;
    }

HTML

    <div class="overlay">
        <div class="overlay-content"></div>
    </div>

    <div class="background-content">
        lengthy content here
    </div>

Básicamente, podrías hacerlo sin JS.

La idea principal es agregar html / body con height: 100% y overflow: auto. y dentro de su superposición, puede habilitar / deshabilitar el desplazamiento según sus requisitos.

¡Espero que esto ayude!

En mi caso, ninguna de estas soluciones funcionó en iPhone (iOS 11.0).

La única solución efectiva que funciona en todos mis dispositivos es esta: ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintenance-scroll-position

Use el código a continuación para deshabilitar y habilitar la barra de desplazamiento.

Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();