Bir ışık kutusu kullanırken üst html / body kaydırma çubuğunu devre dışı bırakmaya çalışıyorum. Buradaki ana kelime devre dışıdır . Ben do not ile gizlemek istiyorum overflow: hidden;.

Bunun nedeni overflow: hidden, sitenin zıplamasını ve kaydırmanın yapıldığı alanı kaplamasıdır.

Hala bir kaydırma çubuğunu gösterirken devre dışı bırakmanın mümkün olup olmadığını bilmek istiyorum.

Üst katmanın altındaki sayfa üstte "sabitlenebilir" ise, kaplamayı açtığınızda

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

yine de sağ kaydırma çubuğunu görmelisiniz, ancak içerik kaydırılamaz. Yer paylaşımını kapattığınızda, bu özellikleri

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

Sadece bu şekilde teklif ettim çünkü herhangi bir kaydırma etkinliğini değiştirmeniz gerekmiyordu

Güncelleme

Ayrıca küçük bir iyileştirme de yapabilirsiniz: document.documentElement.scrollTopözelliği, katman açılmadan hemen önce javascript aracılığıyla alırsanız, bu değeri topgövde öğesinin özelliği olarak dinamik olarak atayabilirsiniz : bu yaklaşımla sayfa, üstte veya daha önce kaydırdıysanız.

css

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

JS

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

Seçilen çözüme dört küçük ekleme:

1. IE'de çift kaydırma çubuklarını önlemek için gövde yerine html'ye 'noscroll' uygulayın
2. 'Noscroll' sınıfını eklemeden önce gerçekten bir kaydırma çubuğunun olup olmadığını kontrol etmek için . Aksi takdirde, site yeni kaydırılmayan kaydırma çubuğu tarafından atlanır.
3. Mümkün olan scrollTop'u tutmak için sayfanın tamamı tekrar yukarı çıkmaz (Fabrizio'nun güncellemesi gibi, ancak 'noscroll' sınıfını eklemeden önce değeri almanız gerekir)
4. Tüm tarayıcılar scrollTop'u http://help.dottoro.com/ljnvjiow.php adresinde belirtilen şekilde işlemez.

Çoğu tarayıcıda işe yarayan eksiksiz bir çözüm:

CSS

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

Kaydırmayı devre dışı bırak

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

Kaydı etkinleştir

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

Beni doğru yola koydukları için Fabrizio ve Dejan'a ve çift kaydırma çubuğuna çözüm için Brodingo'ya teşekkürler

JQuery dahil olduğunda:

devre dışı

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

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

etkinleştirme

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

kullanım

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

OP benim

Fcalderan'ın cevabı sayesinde bir çözüm oluşturabildim. Çözümümü burada bırakıyorum çünkü nasıl kullanılacağına açıklık getiriyor ve çok önemli bir ayrıntı ekliyor,width: 100%;

Bu sınıfı ekliyorum

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

bu benim için çalıştı ve Fancyapp kullanıyordum.

Bu benim için gerçekten iyi çalıştı ....

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

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


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

bu iki kod satırını kaydırmayı kilitlediğinizde karar verdiğiniz her şeyle sarın.

Örneğin

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

Kaydırma olayını devre dışı bırakamazsınız, ancak fare tekerleği ve dokunma hareketi gibi bir kaymaya neden olan ilgili eylemleri devre dışı bırakabilirsiniz:

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

Vücudun kaydırma çubuğunu ile gizleyebilir ve overflow: hiddeniçerik atlamaması için aynı anda bir kenar boşluğu ayarlayabilirsiniz:

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

Ardından, boşluğu doldurmak için sayfaya devre dışı bırakılmış bir kaydırma çubuğu ekleyebilirsiniz:

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>

Bunu kendi ışık kutusu uygulamam için yaptım. Şimdiye kadar iyi çalışıyor gibi görünüyor.

Birlikte gittiğimiz çözüm bu. Kaplama açıldığında kaydırma konumunu kaydedin, kullanıcı sayfayı kaydırmaya çalıştığında kaydedilen konuma geri dönün ve kaplama kapandığında dinleyiciyi kapatın.

IE'de biraz gergin, ancak Firefox / Chrome'da bir cazibe gibi çalışıyor.

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>

Benzer bir sorunum vardı: göründüğünde kaydırmayı önleyen bir sol menü. Yükseklik 100vh olarak ayarlanır ayarlanmaz kaydırma çubuğu kayboldu ve içerik sağa sarsıldı.

Bu nedenle, kaydırma çubuğunu etkin tutmanın sakıncası yoksa (ancak pencereyi tam olarak herhangi bir yere kaydırılmayacak şekilde tam yüksekliğe ayarlamak), başka bir olasılık, kaydırma çubuklarının gösterilmesini sağlayacak küçük bir alt kenar boşluğu ayarlamaktır:

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

taşmayı koruyabilirsiniz: gizli ancak kaydırma konumunu manuel olarak yönetin:

gerçek kaydırma konumunun izini göstermeden önce:

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

İşe yaramalı

Kaba ama çalışma yolu, kaydırmayı üste doğru zorlamak ve böylece kaydırmayı etkili bir şekilde devre dışı bırakmak olacaktır:

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

Işık kutusunu açtığınızda bayrağı kaldırın ve kapatırken bayrağı indirin.

Canlı test durumu .

Ben "taşma: gizli" yöntemine sadık ve sadece kaydırma çubuğu genişliğine eşit dolgu sağ ekleyin.

Kayıp çubuk genişliği fonksiyonunu lostsource ile alın .

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

Yer paylaşımını gösterirken, html'ye "noscroll" sınıfını ekleyin ve gövdeye dolgu hakkı ekleyin:

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

Gizlerken sınıfı ve dolguyu çıkarın:

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

Noscroll tarzı sadece şu şekildedir:

.noscroll { overflow: hidden; }

Sabit konumlu herhangi bir elemanınız varsa, dolguyu bu elemanlara da eklemeniz gerektiğini unutmayın.

<div id="lightbox"><body>öğenin içinde olduğundan ışık kutusunu kaydırdığınızda gövdeyi de kaydırırsınız. Çözüm, <body>öğeyi% 100'ün üzerine uzatmamak, uzun içeriği başka bir divöğenin içine yerleştirmek ve gerekirse bu divöğeye bir kaydırma çubuğu eklemektir 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>

Şimdi, ışık kutusu (ve bodyde) üzerinde kaydırmanın bir etkisi yoktur, çünkü gövde ekran yüksekliğinin% 100'ünden daha uzun değildir.

Tüm kip / ışık kutusu javascript tabanlı sistemler, kip / ışık kutusunu görüntülerken, html etiketi veya gövde etiketinde taşma kullanır.

Işık kutusu gösterildiğinde, js html veya gövde etiketinde gizli bir taşmayı iter. Işık kutusu gizlendiğinde, bazıları gizli olanı kaldırır, html veya gövde etiketinde taşma otomatik olarak iter.

Mac üzerinde çalışan geliştiriciler kaydırma çubuğunun sorununu görmezler.

Kaydırma çubuğunun kaldırılmasının modalının altında kayan içeriği görmemek için gizli olanı bir kümeyle değiştirin.

Işık kutusu açık / göster:

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

Işık kutusu kapat / gizle:

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

Üst katmanın altındaki sayfa üstte "sabitlenebilir" ise, kaplamayı açtığınızda

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

kaydırılabilir gövdeye bu sınıfı sağlayın, yine de sağ kaydırma çubuğunu görmelisiniz, ancak içerik kaydırılamaz.

Sayfanın konumunu korumak için bunu jquery'de yapın

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

Yer paylaşımını kapattığınızda, bu özellikleri

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

Sadece bu şekilde teklif ettim çünkü herhangi bir kaydırma etkinliğini değiştirmeniz gerekmiyordu

Bu, kaydırma konumunu kaydedip kaydırmayı etkinleştirerek geri yükleyerek görünüm alanının üste atlamasını durduracaktır.

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

Şimdi tek yapmanız gereken fonksiyonları çağırmak

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

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

Gövde kaydırma kaldırılırken sabit modal içerik atlama kurtulmak için başka bir çözüm, sayfa genişliğini normalleştirmek için:

body {width: 100vw; overflow-x: hidden;}

Daha sonra sabit konum veya taşma ile oynayabilirsiniz: modal açıkken vücut için gizli. Ancak yatay kaydırma çubuklarını gizleyecektir - genellikle duyarlı web sitesinde gerekli değildir.

Javascript ile yapabilirsiniz:

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

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

Ardından, ışık kutunuz kapalıyken devre dışı bırakın.

Ancak, ışık kutunuzda bir kaydırma çubuğu varsa, açıkken kaydırma yapamazsınız. Çünkü windowhem bodyve içerir #lightbox. Bu yüzden aşağıdaki gibi bir mimari kullanmalısınız:

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

Ve sonra onscrolletkinliği yalnızca tarihinde uygulayın #global.