Saya telah mencari solusi jenis "lightbox" yang memungkinkan ini tetapi belum menemukan satu (tolong, sarankan jika Anda tahu ada).

Perilaku yang saya coba buat ulang persis seperti yang Anda lihat di Pinterest saat mengklik gambar. Overlay dapat digulir ( seperti seluruh overlay bergerak ke atas seperti halaman di atas halaman ) tetapi badan di belakang overlay diperbaiki.

Saya mencoba membuat ini hanya dengan CSS ( yaitu divhamparan di atas seluruh halaman dan badan denganoverflow: hidden ), tetapi tidak mencegah divdari digulir.

Bagaimana menjaga agar tubuh / halaman tidak bergulir tetapi tetap bergulir di dalam wadah layar penuh?

Teori

Melihat implementasi situs pinterest saat ini (mungkin akan berubah di masa mendatang), saat Anda membuka overlay, sebuah noscrollkelas diterapkan ke bodyelemen dan overflow: hiddendiatur, sehingga bodytidak lagi dapat digulir.

Overlay (dibuat on-the-fly atau sudah di dalam halaman dan dibuat terlihat melalui display: block, tidak ada bedanya) memiliki position : fixeddan overflow-y: scroll, dengan top, left, rightdan bottomsifat set ke 0: gaya ini membuat overlay mengisi seluruh viewport.

Bagian divdalam overlay malah tepat di position: statickemudian scrollbar vertikal yang Anda lihat terkait dengan elemen itu. Hasilnya, konten dapat digulir tetapi hamparan tetap diperbaiki.

Ketika Anda menutup zoom, Anda menyembunyikan overlay (via display: none) dan kemudian Anda juga bisa menghapusnya sepenuhnya melalui javascript (atau hanya konten di dalamnya, terserah Anda bagaimana menyuntikkannya).

Sebagai langkah terakhir Anda juga harus menghapus noscrollkelas ke body(jadi properti overflow kembali ke nilai awal)

Kode

Contoh Codepen

(berfungsi dengan mengubah aria-hiddenatribut overlay untuk menampilkan dan menyembunyikannya dan meningkatkan aksesibilitasnya).

Markup
(tombol terbuka)

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

(tombol overlay dan tutup)

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

});

Akhirnya, inilah contoh lain di mana overlay terbuka dengan efek fade-in oleh CSS yang transitionditerapkan ke opacityproperti. Juga padding-rightditerapkan untuk menghindari reflow pada teks yang mendasarinya ketika scrollbar menghilang.

Contoh Codepen (fade)

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

Jika Anda ingin mencegah overscrolling pada ios, Anda dapat menambahkan posisi tetap ke kelas .noscroll Anda

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

Jangan gunakan overflow: hidden;pada body. Secara otomatis akan menggulir semuanya ke atas. Tidak perlu JavaScript juga. Manfaatkan overflow: auto;. Solusi ini bahkan bekerja dengan Safari seluler:

Struktur HTML

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

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

Styling

.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;
}

Lihat demo di sini dan kode sumber di sini .

Memperbarui:

Untuk orang-orang yang menginginkan bilah spasi keyboard, halaman atas / bawah berfungsi: Anda harus fokus pada overlay, mis. Mengkliknya, atau secara manual JS memfokuskannya sebelum bagian ini divakan merespons keyboard. Sama dengan ketika overlay "dimatikan", karena hanya memindahkan overlay ke samping. Kalau tidak ke browser, ini hanya dua yang normal divdan tidak akan tahu mengapa harus fokus pada salah satu dari mereka.

overscroll-behavior Properti css memungkinkan untuk menimpa perilaku gulir overflow default browser ketika mencapai bagian atas / bawah konten.

Cukup tambahkan gaya berikut ke overlay:

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

Demo codepen

Saat ini berfungsi di Chrome, Firefox dan IE ( caniuse )

Untuk lebih jelasnya periksa artikel pengembang google .

Sebagian besar solusi memiliki masalah sehingga mereka tidak mempertahankan posisi gulir, jadi saya melihat bagaimana Facebook melakukannya. Selain mengatur konten yang mendasari position: fixedmereka juga mengatur bagian atas secara dinamis untuk mempertahankan posisi gulir:

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

Kemudian, ketika Anda menghapus overlay lagi, Anda perlu mengatur ulang posisi gulir:

window.scrollTo(0, scrollPosition);

Saya membuat sedikit contoh untuk menunjukkan solusi ini

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>

Perlu dicatat bahwa kadang-kadang menambahkan "overflow: hidden" ke tag tubuh tidak melakukan pekerjaan. Dalam hal ini, Anda harus menambahkan properti ke tag html juga.

html, body {
    overflow: hidden;
}

Secara umum, jika Anda ingin orang tua (tubuh dalam kasus ini) mencegahnya menggulir ketika seorang anak (overlay dalam kasus ini) menggulir, maka buat anak menjadi saudara kandung orang tua untuk mencegah acara gulir agar tidak menggelembung hingga orang tua. Jika orangtua adalah tubuh, ini membutuhkan elemen pembungkus tambahan:

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

Lihat Gulir konten DIV tertentu dengan bilah gulir utama peramban untuk melihatnya berfungsi.

Jawaban yang dipilih benar, tetapi memiliki beberapa keterbatasan:

• "Teman kencan" yang sangat keras dengan jari Anda masih akan menggulir <body>di latar belakang
• Membuka keyboard virtual dengan mengetuk <input>dalam modal akan mengarahkan semua scroll di masa depan<body>

Saya tidak memiliki perbaikan untuk masalah pertama, tetapi ingin memberi penjelasan tentang yang kedua. Yang membingungkan, Bootstrap dulu memiliki masalah keyboard didokumentasikan, tetapi mereka mengklaim itu diperbaiki, mengutip http://output.jsbin.com/cacido/quiet sebagai contoh perbaikan.

Memang, contoh itu berfungsi dengan baik di iOS dengan tes saya. Namun, memutakhirkannya ke Bootstrap terbaru (v4) mematahkannya.

Dalam upaya untuk mencari tahu apa perbedaan di antara mereka, saya mengurangi test case untuk tidak lagi bergantung pada Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG .

Faktor penentunya aneh. Menghindari masalah keyboard tampaknya mengharuskan yang background-color tidak diatur pada root yang <div>berisi modal dan konten modal harus bersarang di yang lain <div>, yang dapat background-colordiatur.

Untuk mengujinya, batalkan komentar pada baris di bawah ini dalam contoh 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; */
}

Untuk perangkat sentuh, coba tambahkan lebar 101vhtransparan 1px lebar, transparan di bungkus overlay. Kemudian tambahkan -webkit-overflow-scrolling:touch; overflow-y: auto;ke bungkusnya. Trik ini membuat safari seluler berpikir bahwa overlay dapat digulir, sehingga memotong acara sentuh dari tubuh.

Ini halaman contoh. Buka di safari seluler: http://www.originalfunction.com/overlay.html

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

Perilaku yang ingin Anda cegah disebut chaining scroll. Untuk menonaktifkannya, atur

overscroll-behavior: contain;

pada hamparan Anda di CSS.

Saya menemukan pertanyaan ini mencoba menyelesaikan masalah yang saya miliki dengan halaman saya di Ipad dan Iphone - body sedang bergulir ketika saya menampilkan div tetap sebagai popup dengan gambar.

Beberapa jawaban bagus, namun tidak ada yang memecahkan masalah saya. Saya menemukan posting blog berikut oleh Christoffer Pettersson. Solusi yang disajikan di sana membantu masalah yang saya miliki dengan perangkat iOS dan itu membantu masalah latar belakang bergulir saya.

Enam hal yang saya pelajari tentang pengguliran gelang karet iOS Safari

Seperti yang disarankan, saya memasukkan poin utama dari posting blog jika tautannya kedaluwarsa.

"Untuk menonaktifkan bahwa pengguna dapat menggulir halaman latar belakang saat" menu terbuka ", dimungkinkan untuk mengontrol elemen apa yang harus digulir atau tidak, dengan menerapkan beberapa JavaScript dan kelas CSS.

Berdasarkan jawaban Stackoverflow ini, Anda dapat mengontrol elemen-elemen dengan penonaktifan penonaktifan tidak boleh melakukan tindakan gulir default ketika peristiwa touchmove terpicu.

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

Dan kemudian letakkan kelas disable-scrolling di halaman div:

<div class="page disable-scrolling">

Anda dapat dengan mudah melakukan ini dengan beberapa css dan JQuery "baru".

Awalnya: body {... overflow:auto;} Dengan JQuery, Anda dapat beralih secara dinamis antara 'overlay' dan 'body'. Saat berada di 'tubuh', gunakan

body {
   position: static;
   overflow: auto;
}

Saat menggunakan 'overlay'

body {
   position: sticky;
   overflow: hidden;
}

JQuery untuk sakelar ('tubuh' -> 'hamparan'):

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

JQuery untuk sakelar ('overlay' -> 'body'):

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

Saya ingin menambahkan jawaban sebelumnya karena saya mencoba melakukan itu, dan beberapa tata letak rusak segera setelah saya memindahkan tubuh ke posisi: diperbaiki. Untuk menghindari itu, saya juga harus mengatur tinggi badan hingga 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");
}

Gunakan HTML berikut:

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

Kemudian JavaScript untuk mencegat dan berhenti menggulir:

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

Kemudian untuk mengembalikan semuanya menjadi normal:

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

Jika tujuannya adalah untuk menonaktifkan perangkat seluler / sentuh maka cara paling mudah untuk melakukannya adalah menggunakan touch-action: none;.

Contoh:

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>

(Contoh tidak berfungsi dalam konteks Stack Overflow. Anda harus membuatnya ulang di halaman yang berdiri sendiri.)

Jika Anda ingin menonaktifkan gulir #appwadah, tambahkan saja touch-action: none;.

coba ini

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

Jika Anda ingin menghentikan body / html, gulir tambahkan sebagai berikut

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>

Pada dasarnya, Anda bisa melakukannya tanpa JS.

Gagasan utamanya adalah menambahkan html / tubuh dengan tinggi: 100% dan melimpah: otomatis. dan di dalam hamparan Anda, Anda dapat mengaktifkan / menonaktifkan gulir berdasarkan kebutuhan Anda.

Semoga ini membantu!

Dalam kasus saya, tidak ada solusi yang berhasil di iPhone (iOS 11.0).

Satu-satunya perbaikan efektif yang berfungsi pada semua perangkat saya adalah yang ini - ios-10-safari-cegah-scrolling-balik-a-fix-overlay-dan-pertahankan-gulir-posisi

Gunakan kode di bawah ini untuk menonaktifkan dan mengaktifkan bilah gulir.

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