Ben buna izin veren ama henüz bir tane bulamadım "lightbox" tipi bir çözüm arıyordum (lütfen, eğer herhangi birini biliyorsanız öneririz).

Yeniden oluşturmaya çalıştığım davranış , bir resme tıkladığınızda Pinterest'te gördüğünüz gibi . Kaplama kaydırılabilir ( tüm kaplamada olduğu gibi sayfanın üstündeki bir sayfa gibi yukarı kayar ) ancak kaplamanın arkasındaki gövde sabittir.

Bunu sadece CSS ile oluşturmaya çalıştım ( yani divtüm sayfanın ve gövdenin üstündeki bir bindirmeoverflow: hidden ), ancak divkaydırılabilir olmasını engellemiyor .

Gövde / sayfanın kaydırılmasını nasıl önler, ancak tam ekran kapsayıcısının içinde kaydırmaya nasıl devam edersiniz?

teori

Pinterest sitesinin mevcut uygulamasına bakıldığında (gelecekte değişebilir), bindirmeyi açtığınızda öğeye bir noscrollsınıf uygulanır bodyve overflow: hiddenayarlanır, bu nedenle bodyartık kaydırılamaz.

Bindirme (-fly-on ya da zaten sayfanın içinde ve aracılığıyla görünür hale oluşturulan display: block, hiç fark etmez) sahiptir position : fixedve overflow-y: scroll, ile top, left, rightve bottomözellikleri ayarlı 0: Bu tarz tüm görünüm doldurmak overlay yapar.

Bunun divyerine bindirmenin iç kısmı, position: staticgördüğünüz dikey kaydırma çubuğunun o öğeyle ilişkilidir. Sonuç olarak içerik kaydırılabilir ancak yer paylaşımı sabit kalır.

Yakınlaştırmayı kapattığınızda kaplamayı gizlersiniz (üzerinden display: none) ve ardından javascript (veya yalnızca içindeki içerik, tamamen nasıl enjekte edeceğinize bağlı olarak) tamamen kaldırabilirsiniz.

Son adım olarak, noscrollsınıfı body(gruba) kaldırmanız gerekir (böylece taşma özelliği başlangıç ​​değerine döner)

kod

Codepen Örneği

( aria-hiddenyer paylaşımını göstermek ve gizlemek ve erişilebilirliğini artırmak amacıyla bindirmenin niteliğini değiştirerek çalışır ).

İşaretleme
(açma düğmesi)

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

(kaplama ve kapatma düğmesi)

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

});

Son olarak, yerleşimin transition, opacitymülke uygulanan bir CSS tarafından solma etkisi ile açıldığı başka bir örnek . Ayrıca padding-right, kaydırma çubuğu kaybolduğunda alttaki metnin yeniden akmasını önlemek için a uygulanır.

Kodpen Örneği (solmaya)

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

İOS'ta fazla kaydırmayı önlemek istiyorsanız, .noscroll sınıfınıza sabit konum ekleyebilirsiniz

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

overflow: hidden;Üzerinde kullanmabody . Her şeyi otomatik olarak yukarıya kaydırır. JavaScript'e de gerek yok. Kullanın overflow: auto;. Bu çözüm mobil Safari ile bile çalışır:

HTML Yapısı

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

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

Şekillendirme

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

Demoyu buradan ve kaynak kodunu buradan görebilirsiniz .

Güncelleme:

Klavye boşluk çubuğu isteyen kullanıcılar için, sayfa yukarı / aşağı çalışmak: bindirmeye odaklanmanız, örneğin üzerine tıklamanız veya divklavyenin bu bölümünden önce buna odaklanmanız gerekir . Kaplama "kapatıldığında" ile aynıdır, çünkü kaplama sadece yana doğru hareket eder. Aksi takdirde tarayıcıya, bunlar sadece iki normaldir divve neden bunlardan herhangi birine odaklanması gerektiğini bilmez.

overscroll-behavior css özelliği, içeriğin üstüne / altına ulaşırken tarayıcının varsayılan taşma kaydırma davranışını geçersiz kılar.

Yer paylaşımına aşağıdaki stilleri eklemeniz yeterlidir:

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

Codepen demosu

Şu anda Chrome, Firefox ve IE'de çalışıyor ( caniuse ) çalışıyor

Daha fazla ayrıntı için google geliştiriciler makalesine bakın .

Çoğu çözüm kaydırma konumunu korumaması sorununa sahiptir, bu yüzden Facebook'un bunu nasıl yaptığına bir göz attım. Altta yatan içeriği ayarlamanın yanı sıra position: fixedkaydırma konumunu korumak için üst kısmı dinamik olarak ayarlarlar :

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

Ardından kaplamayı tekrar kaldırdığınızda kaydırma konumunu sıfırlamanız gerekir:

window.scrollTo(0, scrollPosition);

Bu çözümü göstermek için küçük bir örnek oluşturdum

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>

Vücut etiketine bazen "taşma: gizli" eklemenin işi yapmadığını belirtmek gerekir. Bu gibi durumlarda, özelliği html etiketine de eklemeniz gerekir.

html, body {
    overflow: hidden;
}

Genel olarak, bir ebeveynin (bu durumda vücut) bir çocuk (bu durumda yer paylaşımı) kaydırıldığında kaymasını önlemek istiyorsanız, kaydırma olayının köpürmesini önlemek için çocuğu ebeveynin kardeşi yapın ebeveyn. Ebeveynin vücut olması durumunda, bu ek bir sarma elemanı gerektirir:

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

Bkz tarayıcının ana kaydırma çubuğu ile ilerleyin özellikle DIV içeriğini kendi çalışma görmek için.

Seçilen cevap doğrudur, ancak bazı sınırlamaları vardır:

• Parmağınızla süper sert "sallanıyor" yine <body>de arka planda kayar
• Klavyedeki simgesine dokunarak sanal klavyeyi <input>açmak gelecekteki tüm kaydırmaları<body>

İlk sorun için bir çözümüm yok, ancak ikincisine biraz ışık tutmak istedim. Kafa karıştırıcı bir şekilde, Bootstrap klavye sorununu belgelemişti, ancak http://output.jsbin.com/cacido/quiet'ten bahsederek düzeltildiğini iddia ettiler düzeltmenin bir örneği olarak bahsedildiğini .

Gerçekten de, bu örnek testlerimle iOS'ta iyi çalışıyor. Ancak, onu en son Bootstrap'e (v4) yükseltmek bozar.

Aralarındaki farkın ne olduğunu anlamaya çalışmak için, bir test senaryosunu artık Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG'ye bağımlı olmayacak şekilde azalttım .

Karar verici faktörler tuhaftır. Klavye sorunu kaçınmak gerektirir görünüyor background-color değildir kökü ayarlanmış <div>modal içeren ve başka iç içe olmalıdır modal olarak içeriğini <div>olabilir, background-colorset.

Test etmek için, Codepen örneğinde aşağıdaki satırı kaldırın:

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

Dokunmatik cihazlar için, 101vhbindirmenin sarmalayıcısına 1 piksel genişliğinde, minimum yükseklikte şeffaf bir div eklemeyi deneyin . Sonra Ekle-webkit-overflow-scrolling:touch; overflow-y: auto; sargıya . Bu, mobil safariyi kaplamanın kaydırılabilir olduğunu düşünmeye iter, böylece dokunma olayını vücuttan durdurur.

İşte bir örnek sayfa. Mobil safaride aç: http://www.originalfunction.com/overlay.html

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

Önlemek istediğiniz davranışa kaydırma zinciri adı verilir. Devre dışı bırakmak için

overscroll-behavior: contain;

CSS'deki bindirmenizde.

Bu soruyu Ipad ve Iphone'daki sayfamla yaşadığım sorunu çözmeye çalışırken buldum - görüntü ile sabit div olarak görüntülerken gövde kaydırıyordu.

Bazı cevaplar iyi, ancak hiçbiri sorunumu çözmedi. Aşağıdaki blog gönderisini Christoffer Pettersson tarafından buldum. Sunulan çözüm, iOS cihazlarıyla ilgili sorunuma yardımcı oldu ve kaydırma arka plan sorunuma yardımcı oldu.

İOS Safari'nin lastik bant kaydırma hakkında öğrendiğim altı şey

Önerildiği gibi, bağlantı modası geçmiş olması durumunda blog yazısının önemli noktalarını dahil ediyorum.

"Kullanıcının" menü açık "durumdayken arka plan sayfasını kaydırmasını devre dışı bırakmak için, bazı JavaScript ve CSS sınıfı uygulayarak hangi öğelerin kaydırılmasına izin verilip verilmeyeceğini kontrol etmek mümkündür.

Bu Stackoverflow yanıtına dayanarak, kaydırmayı devre dışı bırakma özellikli öğelerin, touchmove olayı tetiklendiğinde varsayılan kaydırma eylemlerini gerçekleştirmemesini kontrol edebilirsiniz. "

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

Ardından, devre dışı bırakılan kaydırma sınıfını div sayfasına yerleştirin:

<div class="page disable-scrolling">

Bunu kolayca bazı "yeni" css ve JQuery ile yapabilirsiniz.

Başlangıçta: body {... overflow:auto;} JQuery ile dinamik olarak 'kaplama' ve 'gövde' arasında geçiş yapabilirsiniz. 'Vücut' üzerindeyken,

body {
   position: static;
   overflow: auto;
}

'Yer paylaşımlı' kullanımdayken

body {
   position: sticky;
   overflow: hidden;
}

Anahtar için JQuery ('gövde' -> 'kaplama'):

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

Anahtar için JQuery ('kaplama' -> 'gövde'):

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

Önceki cevaplara eklemek istiyorum çünkü bunu yapmaya çalıştım ve vücudu değiştirdiğim anda bazı düzen kırıldı: sabit. Bundan kaçınmak için vücudun yüksekliğini% 100'e ayarlamak zorunda kaldım:

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

Aşağıdaki HTML'yi kullanın:

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

Ardından kaydırmayı durdurmak ve durdurmak için JavaScript:

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

Sonra işleri normale döndürmek için:

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

Amaç mobil / dokunmatik cihazlarda devre dışı bırakmaksa, bunu yapmanın en kolay yolu kullanmaktır touch-action: none;.

Misal:

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>

(Örnek, Yığın Taşması bağlamında çalışmaz. Tek başına bir sayfada yeniden oluşturmanız gerekir.)

#appKapsayıcıya kaydırmayı devre dışı bırakmak istiyorsanız , eklemeniz yeterlidir touch-action: none;.

bunu dene

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

Gövde / html kaydırma işlemini durdurmak istiyorsanız aşağıdaki gibi ekleyin

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>

Temel olarak, JS olmadan yapabilirsiniz.

Ana fikir yükseklik:% 100 ve taşma: otomatik ile html / gövde eklemektir. ve yer paylaşımınızın içinde kaydırmayı gereksiniminize göre etkinleştirebilir / devre dışı bırakabilirsiniz.

Bu yardımcı olur umarım!

Benim durumumda, bu çözümlerin hiçbiri iPhone'da (iOS 11.0) işe yaramadı.

Tüm aygıtlarımda çalışan tek etkili düzeltme budur - ios-10-safari-önlemek-kaydırma-arkasında-sabit-yer paylaşımı ve bakım-kaydırma-konumu

Kaydırma çubuğunu devre dışı bırakmak ve etkinleştirmek için aşağıdaki kodu kullanın.

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