Saya mencoba menonaktifkan html / body scrollbar dari orang tua ketika saya menggunakan lightbox. Kata utama di sini adalah disable . Saya tidak ingin menyembunyikannya overflow: hidden;.

Alasan untuk ini adalah yang overflow: hiddenmembuat situs melompat dan mengambil area tempat gulungan itu.

Saya ingin tahu apakah mungkin untuk menonaktifkan scrollbar sementara masih menunjukkannya.

Jika halaman di bawah overlayer dapat "diperbaiki" di bagian atas, saat Anda membuka overlay yang dapat Anda atur

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

Anda masih harus melihat scrollbar kanan tetapi kontennya tidak dapat digulir. Saat Anda menutup overlay, kembalikan properti ini dengan

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

Saya hanya mengusulkan cara ini hanya karena Anda tidak perlu mengubah acara gulir

Memperbarui

Anda juga bisa melakukan sedikit perbaikan: jika Anda mendapatkan document.documentElement.scrollTopproperti melalui javascript tepat sebelum pembukaan lapisan, Anda bisa secara dinamis menetapkan nilai itu sebagai topproperti elemen tubuh: dengan pendekatan ini halaman akan berdiri di tempatnya, tidak masalah jika Anda ' kembali di atas atau jika Anda sudah menggulir.

Css

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

JS

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

Empat tambahan kecil untuk solusi yang dipilih:

1. Terapkan 'noscroll' ke html alih-alih ke badan untuk mencegah bilah gulir ganda di IE
2. Untuk memeriksa apakah sebenarnya ada bilah gulir sebelum menambahkan kelas 'noscroll'. Jika tidak, situs juga akan melompat didorong oleh bilah gulir non-gulir baru.
3. Untuk menjaga kemungkinan scrollTop sehingga seluruh halaman tidak kembali ke atas (seperti pembaruan Fabrizio, tetapi Anda perlu mengambil nilainya sebelum menambahkan kelas 'noscroll')
4. Tidak semua browser menangani scrollTop dengan cara yang sama seperti yang didokumentasikan di http://help.dottoro.com/ljnvjiow.php

Solusi lengkap yang tampaknya berfungsi untuk sebagian besar browser:

CSS

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

Nonaktifkan gulir

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

Aktifkan gulir

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

Terima kasih kepada Fabrizio dan Dejan karena menempatkan saya di jalur yang benar dan ke Brodingo untuk solusi bilah gulir ganda

Dengan jQuery yang disertakan:

nonaktifkan

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

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

memungkinkan

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

pemakaian

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

Saya OP

Dengan bantuan jawaban dari fcalderan saya dapat membentuk solusi. Saya meninggalkan solusi saya di sini karena membawa kejelasan tentang cara menggunakannya, dan menambahkan detail yang sangat penting,width: 100%;

Saya menambahkan kelas ini

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

ini bekerja untuk saya dan saya menggunakan Fancyapp.

Ini bekerja sangat baik untuk saya ....

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

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


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

bungkus saja dua baris kode dengan apa pun yang memutuskan kapan Anda akan mengunci pengguliran.

misalnya

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

Anda tidak dapat menonaktifkan acara gulir, tetapi Anda dapat menonaktifkan tindakan terkait yang mengarah ke gulir, seperti roda mouse dan roda sentuh:

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

Anda dapat menyembunyikan bilah gulir badan dengan overflow: hiddendan mengatur margin pada saat yang sama sehingga konten tidak melompat:

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

Dan kemudian Anda dapat menambahkan scrollbar yang dinonaktifkan ke halaman untuk mengisi celah:

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>

Saya melakukan ini untuk implementasi lightbox saya sendiri. Tampaknya bekerja dengan baik sejauh ini.

Ini adalah solusi yang kami gunakan. Cukup simpan posisi gulir saat hamparan dibuka, gulir kembali ke posisi simpanan setiap kali pengguna mencoba menggulir halaman, dan matikan pendengar saat hamparan ditutup.

Ini agak gelisah di IE, tetapi bekerja seperti pesona di 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>

Saya memiliki masalah yang sama: menu sebelah kiri yang, ketika muncul, mencegah bergulir. Begitu ketinggian diatur ke 100vh, bilah gulir menghilang dan konten tersentak ke kanan.

Jadi, jika Anda tidak keberatan mengaktifkan bilah gulir (tetapi mengatur jendela ke ketinggian penuh sehingga tidak akan benar-benar menggulir ke mana pun) maka kemungkinan lain adalah mengatur margin bawah yang kecil, yang akan membuat bilah gulir ditampilkan:

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

Anda dapat terus meluap: disembunyikan tetapi mengelola posisi gulir secara manual:

sebelum menampilkan jejak gulir posisi aktual:

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

itu harus bekerja

Cara kasar tetapi berfungsi adalah memaksa gulungan kembali ke atas, sehingga secara efektif menonaktifkan pengguliran:

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

Saat Anda membuka lightbox, angkat bendera dan saat menutupnya, turunkan bendera.

Kasing uji langsung .

Saya suka tetap menggunakan metode "overflow: hidden" dan hanya menambahkan padding-right yang sama dengan lebar scrollbar.

Dapatkan fungsi lebar scrollbar, dengan sumber hilang .

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

Saat menampilkan overlay, tambahkan kelas "noscroll" ke html dan tambahkan padding-right ke body:

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

Saat bersembunyi, lepaskan kelas dan padding:

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

Gaya noscroll hanya ini:

.noscroll { overflow: hidden; }

Perhatikan bahwa jika Anda memiliki elemen dengan posisi: diperbaiki, Anda perlu menambahkan padding ke elemen-elemen itu juga.

<div id="lightbox">ada di dalam <body>elemen, jadi ketika Anda menggulir lightbox Anda juga menggulir tubuh. Solusinya adalah untuk tidak memperpanjang <body>elemen lebih dari 100%, untuk menempatkan konten lama di dalam divelemen lain dan menambahkan scrollbar jika diperlukan dengan divelemen ini 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>

Sekarang, menggulir kotak cahaya (dan bodyjuga) tidak memiliki efek, karena bodi tidak lebih dari 100% dari tinggi layar.

Semua sistem berbasis modal / lightbox javascript menggunakan overflow saat menampilkan modal / lightbox, pada tag html atau tag tubuh.

Saat lightbox ditampilkan, js mendorong limpahan yang disembunyikan pada html atau tag tubuh. Ketika lightbox disembunyikan, beberapa menghapus yang tersembunyi lainnya mendorong auto overflow pada html atau tag tubuh.

Pengembang yang bekerja di Mac, tidak melihat masalah scrollbar.

Ganti saja yang disembunyikan dengan yang tidak disetel untuk tidak melihat konten yang tergelincir di bawah modal penghapusan scrollbar.

Lightbox terbuka / tampilkan:

<html style="overflow: unset;"></html>

Tutup / sembunyikan Lightbox:

<html style="overflow: auto;"></html>

Jika halaman di bawah overlayer dapat "diperbaiki" di bagian atas, saat Anda membuka overlay yang dapat Anda atur

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

berikan kelas ini ke badan yang dapat digulir, Anda masih harus melihat bilah gulir kanan tetapi kontennya tidak dapat digulir.

Untuk mempertahankan posisi halaman lakukan ini dalam jquery

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

Saat Anda menutup overlay, kembalikan properti ini dengan

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

Saya hanya mengusulkan cara ini hanya karena Anda tidak perlu mengubah acara gulir

Ini akan menghentikan viewport melompat ke atas dengan menyimpan posisi gulir dan mengembalikannya pada mengaktifkan gulir.

CSS

.no-scroll{
  position: fixed; 
  width:100%;
  min-height:100vh;
  top:0;
  left:0;
  overflow-y:scroll!important;
}

JS

var scrollTopPostion = 0;

function scroll_pause(){
  scrollTopPostion = $(window).scrollTop();
  $("body").addClass("no-scroll").css({"top":-1*scrollTopPostion+"px"});
}

function scroll_resume(){
  $("body").removeClass("no-scroll").removeAttr("style");
  $(window).scrollTop(scrollTopPostion);
}

Sekarang yang perlu Anda lakukan adalah memanggil fungsi

$(document).on("click","#DISABLEelementID",function(){
   scroll_pause();
});

$(document).on("click","#ENABLEelementID",function(){
   scroll_resume();
});

Anda dapat melakukannya dengan Javascript:

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

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

Dan kemudian nonaktifkan ketika lightbox Anda ditutup.

Tetapi jika lightbox Anda berisi bilah gulir, Anda tidak akan dapat menggulir saat itu terbuka. Ini karena windowmengandung keduanya bodydan #lightbox. Jadi, Anda harus menggunakan arsitektur seperti yang berikut:

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

Dan kemudian terapkan onscrollacara hanya pada #global.