Cegah pengguliran tubuh tetapi izinkan pengguliran hamparan

446

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?

Kentang
sumber
bukankah ini hanya sebuah "overlay" plugin seperti hundrets di luar sana menggunakan posisi tetap dengan overflow-y scroll?
ggzone
3
Tautan ke Pinterest tidak membantu, karena kontennya ada di balik dinding masuk.
2540625
4
Pembaruan 2017: bahkan jika Anda masuk ke Pinterest, apa yang Anda temukan adalah bahwa efek overlay yang dijelaskan dalam OP tidak ada lagi - alih-alih ketika Anda mengklik pada gambar Anda hanya menavigasi ke halaman biasa yang menampilkan versi besar dari gambar.
Annabel

Jawaban:

624

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; 
}
Fabrizio Calderan
sumber
6
Ini jawaban yang benar. Seseorang harus memberinya tanda centang karena sudah benar.
Scoota P
64
Ini benar-benar benar, tetapi berhati-hatilah, itu tidak berfungsi di safari seluler. Latar belakang akan terus bergulir dan hamparan Anda akan diperbaiki.
10
20
Ini bekerja dengan baik. Wadah viewport yang dapat digulir divharus memiliki gaya CSS position:fixed, dan dapat digulir vertikal. Saya berhasil menggunakan overflow-y:auto;dan untuk pengguliran momentum / inersia iOS, saya tambahkan -webkit-overflow-scrolling:touch;ke CSS. Saya menggunakan display:block;,, width:100%;dan height:100%;CSS untuk memiliki viewport satu halaman penuh.
Slink
10
Maaf saya tidak mengerti. Mengatur bodi overflow: tersembunyi tidak menonaktifkan penggulungan bodi elastis di iPad iOS7 saya. Jadi saya harus menambahkan di dalam js saya: document.body.addEventListener ('touchmove', function (event) {event.preventDefault ();}, false); yang SADLY menonaktifkan semua elemen agar tidak dapat digulir juga. Belum menemukan solusi apa pun sejauh ini (tanpa plugIns tambahan)
Garavani
22
Jika pengguna telah menggulirkan tubuh ke bawah saat overlay diaktifkan, ini akan menyebabkan tubuh melompat ke atas ketika Anda mengatur overflow: tersembunyi; Ada jalan lain?
Björn Andersson
75

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

body.noscroll{
    position:fixed;
    overflow:hidden;
}
am80l
sumber
106
Dengan solusi ini, karena posisi tetap, tubuh akan secara otomatis menggulir ke bagian atas konten Anda. Ini bisa mengganggu pengguna Anda.
tzi
5
Masalah lain dengan menggunakan position:fixedadalah bahwa itu mengubah ukuran tubuh utama saya. Mungkin itu bertentangan dengan CSS lain, tetapi overflow:hiddenhanya itu yang dibutuhkan
Dex
3
ini melanggar melompat fokus ketika Anda tab melalui kolom input
Atav32
@ Atav32 Kedengarannya seperti masalah yang terpisah, posisi dan overflow seharusnya tidak mempengaruhi urutan tab.
am80l
@ am80l maaf komentar saya sebelumnya sangat kabur: urutan tab berfungsi, tetapi layar tersentak saat Anda
menabrak
44

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.

Lucia
sumber
5
solusi keren, tapi kemudian saya harus membungkus semua konten saya dalam div, yang saya tidak punya niat untuk melakukan ...
Jacob Raccuia
2
Ini adalah solusi ideal. Jika ada yang mengalami masalah dengan ini, Anda mungkin perlu menambahkan html, body { height: 100%; }(seperti pada demo) agar ini berfungsi dengan benar.
John
4
@ user18490 bagian sudut / material tidak ada hubungannya dengan fakta bahwa solusi ini berfungsi.
Lucia
10
Ini memecah perangkat seluler UX dalam beberapa cara (yaitu: Menyembunyikan URL-bar, Overscroll Affordance, ...), bahkan bilah spasi untuk menggulir di desktop.
tepatnya
2
Ini adalah opsi yang lebih kuat, tetapi hal ini sedikit menyulitkan. Misalnya, PageUp dan PageDown tidak akan berfungsi saat refresh. apa pun yang menggunakan .offset()nilai untuk perhitungan akan kacau, dll ...
BlackPanther
42

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 .

Igor Alemasow
sumber
4
Saya datang jauh-jauh untuk memberi tahu Anda bahwa ini berfungsi pada Chrome, Mozilla, dan Opera terbaru. Selamat bersenang-senang!
Wannabe JavaGeek
3
Seseorang harus menambahkan hadiah untuk ini. Ini solusi yang tepat. Tidak perlu JavaScript. :)
joseph.l.hunsaker
9
Masalah dengan solusi ini adalah hanya berfungsi jika overlay dapat digulir. Jika Anda memiliki modal dan semuanya muat di layar sehingga tidak ada gulir di dalamnya - itu tidak akan menghentikan gulir tubuh. Itu dan itu juga tidak berfungsi di Safari sama sekali :)
waterplea
1
Saya overflow-y: scrollpuas dengan kombinasi ini dengan (dari demo Codepen Anda). Poin yang diangkat oleh @pokrishka valid, tetapi dalam kasus saya ini bukan masalah. Bagaimanapun, saya bertanya-tanya apakah implementasi browser akan mencakup detail ini di masa depan. Saya menemukan bahwa, di Firefox, mengubah ukuran browser sehingga modal tidak sesuai dengan layar dan kemudian mengubah ukurannya lagi sehingga itu membuat properti ini berfungsi (yaitu gulir terkandung) bahkan setelah mengubah ukuran ke ukuran penuh - sampai halaman dimuat ulang , paling sedikit.
Marc.2377
33

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>

Philipp Mitterer
sumber
Ini tampaknya menjadi solusi paling elegan bagi saya. Saya tahu Google menggunakan trik yang sama untuk menggulir halaman dan memindahkan elemen.
forallepsilon
Ini adalah satu-satunya solusi yang bekerja 100% benar untuk saya, saya berharap saya menemukan jawaban ini sebelumnya.
pengguna0103
31

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;
}
Francisco Hodge
sumber
Untuk iOS, Anda juga perlu mengaturwidth: 100%; height: 100%;
Gavin
2
Ini tidak mengatasi masalah yang juga terlihat di banyak solusi lain untuk pertanyaan ini — jika jendela digulir ke mana pun kecuali bagian atas halaman saat modal terbuka, itu akan menyebabkan gulir ke bagian atas halaman. Saya menemukan solusi Philipp Mitterer di sini untuk menjadi pilihan terbaik yang mencakup sebagian besar kasus.
CLL
1
Saya tidak pernah mengalami masalah yang Anda bicarakan (baik di web atau seluler). Bisakah Anda membagikan kode lengkap (dengan DOM) yang tidak berfungsi pada biola atau jsbin? Dalam hal apapun, saya khawatir menggunakan solusi Javascript untuk mengatasi masalah ini.
Francisco Hodge
7

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.

NGLN
sumber
1
Solusi terbaik, pemikiran "out of the box" yang sebenarnya, hanya ungkapan yang tidak begitu baik.
Tandai
Jika tubuh bukan elemen yang menggulir, maka topbar tidak akan meluncur ke atas di ponsel saat Anda menggulir ke bawah ke halaman.
Seph Reed
7

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; */
}
Weston
sumber
4

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

YarGnawh
sumber
Jup, itu berhasil. Baru saja menambahkan -webkit-overflow-scrolling:touch;untuk setiap wadah yang dapat digulir untuk mencegat acara sentuh.
Mati
Saya masih dapat menggulir di iPhone
Simone Zandara
@SeniorSimoneZandara saya tidak. ini berfungsi dengan baik untuk mencegah gulir latar belakang
godblessstrawberry
3

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

overscroll-behavior: contain;

pada hamparan Anda di CSS.

黄 雨伞
sumber
3

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">
TheFullResolution
sumber
2

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

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");
}
Vic Seedoubleyew
sumber
1

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

Damir Kotoric
sumber
1

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

Gajus
sumber
1
Jika tindakan sentuh benar-benar berfungsi di iOS itu. Dan dalam hal ini tidak perlu membungkus seluruh "aplikasi" Anda dalam div terpisah.
powerbuoy
0

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

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!

Ashwin
sumber
-2

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();
Rakesh Chaudhari
sumber