Szukałem rozwiązania typu „lightbox”, które na to pozwala, ale jeszcze go nie znalazłem (proszę zasugerować, jeśli je znasz).

Zachowanie, które próbuję odtworzyć, przypomina to, co zobaczysz na Pinterest po kliknięciu obrazu. Nakładkę można przewijać ( ponieważ w całej nakładce przesuwa się w górę jak strona na górze strony ), ale ciało za nakładką jest nieruchome.

Próbowałem to utworzyć za pomocą CSS ( tj. divNakładki na całą stronę i treśćoverflow: hidden ), ale nie zapobiega divto przewijaniu.

Jak zapobiec przewijaniu treści / strony, ale przewijaniu wewnątrz kontenera pełnoekranowego?

Teoria

Patrząc na bieżącą implementację strony Pinterest (może się zmienić w przyszłości), po otwarciu nakładki noscrollklasa jest stosowana do bodyelementu i overflow: hiddenjest ustawiana, a zatem bodynie jest już przewijana.

Nakładka (utworzony on-the-fly lub już w środku strony i widoczne poprzez display: block, nie ma znaczenia) ma position : fixedi overflow-y: scroll, z top, left, righti bottomwłaściwości ustawione na 0: Ten styl sprawia, że nakładka wypełnić cały rzutnię.

divWewnątrz nakładki jest zamiast po prostu w position: staticto pionowy pasek przewijania widać jest związane z tym elementem. W rezultacie zawartość można przewijać, ale nakładka pozostaje stała.

Po zamknięciu zoomu ukrywasz nakładkę (via display: none), a następnie możesz ją całkowicie usunąć za pomocą javascript (lub tylko zawartość w środku, od Ciebie zależy, jak ją wstrzyknąć).

W ostatnim kroku musisz również usunąć noscrollklasę do body(aby właściwość przepełnienia powróciła do wartości początkowej)

Kod

Przykład Codepen

(działa poprzez zmianę aria-hiddenatrybutu nakładki, aby ją pokazać i ukryć oraz zwiększyć jej dostępność).

Znaczniki
(przycisk Otwórz)

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

(przycisk nakładki i zamknięcia)

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

});

Wreszcie, oto kolejny przykład, w którym nakładka otwiera się z efektem zanikania przez CSS transitionzastosowany do opacitywłaściwości. Stosuje się również a, padding-rightaby uniknąć ponownego wlania tekstu pod tekst, gdy pasek przewijania zniknie.

Przykład Codepen (zanikanie)

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

Jeśli chcesz zapobiec przekroczeniu limitu na iOS, możesz dodać pozycję ustaloną do swojej klasy .noscroll

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

Nie używaj overflow: hidden;na body. Automatycznie przewija wszystko do góry. JavaScript też nie jest potrzebny. Skorzystaj z overflow: auto;. To rozwiązanie działa nawet z mobilnym Safari:

Struktura HTML

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

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

Stylizacja

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

Zobacz demo tutaj i kod źródłowy tutaj .

Aktualizacja:

Dla osób, które chcą spacji na klawiaturze, strona w górę / w dół do pracy: musisz skupić się na nakładce, np. Klikając ją lub ręcznie JS, ustawiając ją, zanim ta część divklawiatury zareaguje. To samo z tym, kiedy nakładka jest „wyłączona”, ponieważ przesuwa ona nakładkę na bok. W przeciwnym razie do przeglądarki są to tylko dwa normalne divi nie wiedziałoby, dlaczego powinno się skupić na jednym z nich.

overscroll-behavior Właściwość css pozwala na przesłonięcie domyślnego zachowania przewijania w przeglądarce po osiągnięciu górnej / dolnej krawędzi treści.

Wystarczy dodać następujące style do nałożenia:

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

Demo Codepen

Obecnie działa w Chrome, Firefox i IE ( caniuse )

Więcej informacji znajdziesz w artykule dla programistów Google .

Większość rozwiązań ma problem polegający na tym, że nie zachowują one pozycji przewijania, więc przyjrzałem się, jak robi to Facebook. Oprócz ustawienia zawartości podkładu position: fixedustawiają również dynamicznie górę, aby zachować pozycję przewijania:

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

Następnie, gdy ponownie usuniesz nakładkę, musisz zresetować pozycję przewijania:

window.scrollTo(0, scrollPosition);

Stworzyłem mały przykład, aby zademonstrować to rozwiązanie

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>

Warto zauważyć, że czasami dodanie „przepełnienia: ukrytego” do tagu body nie działa. W takich przypadkach musisz również dodać właściwość do tagu HTML.

html, body {
    overflow: hidden;
}

Ogólnie rzecz biorąc, jeśli chcesz, aby rodzic (w tym przypadku treść) nie pozwalał na przewijanie, gdy dziecko (nakładka w tym przypadku) przewija się, wtedy uczyń dziecko rodzeństwem rodzica, aby zapobiec pojawieniu się zdarzenia przewijania rodzic. W przypadku, gdy rodzic jest ciałem, wymaga to dodatkowego elementu owijającego:

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

Zobacz Przewijanie konkretnej zawartości DIV za pomocą głównego paska przewijania przeglądarki, aby zobaczyć, jak działa.

Wybrana odpowiedź jest poprawna, ale ma pewne ograniczenia:

• Super twarde „rzuty” palcem będą nadal przewijać się <body>w tle
• Otwarcie wirtualnej klawiatury przez dotknięcie <input>w modalu spowoduje skierowanie wszystkich przyszłych zwojów do<body>

Nie mam poprawki do pierwszego numeru, ale chciałem rzucić nieco światła na drugi. Myląco, Bootstrap zwykł dokumentować problem z klawiaturą, ale twierdzili, że został rozwiązany, powołując się na http://output.jsbin.com/cacido/quiet jako przykład poprawki.

Rzeczywiście, ten przykład działa dobrze na iOS z moimi testami. Jednak uaktualnienie go do najnowszej wersji Bootstrap (v4) psuje go.

Próbując ustalić różnicę między nimi, zmniejszyłem przypadek testowy, aby nie był już zależny od Bootstrap, http://codepen.io/WestonThayer/pen/bgZxBG .

Czynniki decydujące są dziwne. Wydaje się, że unikanie problemu z klawiaturą wymaga, aby background-color nie był ustawiony w katalogu głównym <div>zawierającym modal, a zawartość modalu musi być zagnieżdżona w innym <div>, który można background-colorustawić.

Aby to przetestować, usuń komentarz z poniższej linii w przykładzie 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; */
}

W przypadku urządzeń dotykowych spróbuj dodać 101vhprzezroczysty div o szerokości 1px i minimalnej wysokości w opakowaniu nakładki. Następnie dodaj -webkit-overflow-scrolling:touch; overflow-y: auto;do opakowania. To mobilizuje mobilne safari do myślenia, że ​​nakładkę można przewijać, przechwytując w ten sposób zdarzenie dotykowe z ciała.

Oto przykładowa strona. Otwórz na mobilnym safari: http://www.originalfunction.com/overlay.html

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

Zachowanie, któremu chcesz zapobiec, nazywa się łańcuchem przewijania. Aby go wyłączyć, ustaw

overscroll-behavior: contain;

na twojej nakładce w CSS.

Znalazłem to pytanie, próbując rozwiązać problem z moją stroną na iPadzie i iPhonie - ciało przewijało się, gdy wyświetlałem stały div jako wyskakujące okienko z obrazem.

Niektóre odpowiedzi są dobre, ale żadna z nich nie rozwiązała mojego problemu. Znalazłem następujący post na blogu autorstwa Christoffera Petterssona. Przedstawione tam rozwiązanie pomogło mi rozwiązać problem z urządzeniami iOS i pomogło w problemach z przewijaniem w tle.

Sześć rzeczy nauczyłem się o przewijaniu gumki iOS Safari

Jak zasugerowano, dołączam główne punkty posta na blogu, na wypadek gdyby link stał się nieaktualny.

„Aby wyłączyć możliwość przewijania strony w tle, gdy„ menu jest otwarte ”, można kontrolować, które elementy powinny być przewijane, czy nie, poprzez zastosowanie JavaScript i klasy CSS.

Na podstawie tej odpowiedzi Stackoverflow możesz kontrolować, czy elementy z wyłączonym przewijaniem nie powinny wykonywać domyślnej akcji przewijania po uruchomieniu zdarzenia touchmove. ”

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

A następnie umieść klasę wyłączania przewijania na div strony:

<div class="page disable-scrolling">

Możesz to łatwo zrobić za pomocą niektórych „nowych” css i JQuery.

Początkowo: w body {... overflow:auto;} JQuery możesz dynamicznie przełączać się między „nakładką” a „ciałem”. Na „ciele” użyj

body {
   position: static;
   overflow: auto;
}

W trybie „nakładki”

body {
   position: sticky;
   overflow: hidden;
}

JQuery dla przełącznika („body” -> „overlay”):

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

JQuery dla przełącznika („overlay” -> „body”):

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

Chciałbym dodać do poprzednich odpowiedzi, ponieważ próbowałem to zrobić, a jakiś układ zepsuł się, gdy tylko zmieniłem ciało na pozycję: naprawiono. Aby tego uniknąć, musiałem również ustawić wysokość ciała na 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");
}

Użyj następującego kodu HTML:

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

Następnie JavaScript, aby przechwycić i zatrzymać przewijanie:

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

Następnie, aby przywrócić normalne warunki:

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

Jeśli celem jest wyłączenie na urządzeniach mobilnych / dotykowych, najprostszym sposobem na to jest użycie touch-action: none;.

Przykład:

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>

(Przykład nie działa w kontekście przepełnienia stosu. Będziesz musiał odtworzyć go na stronie autonomicznej).

Jeśli chcesz wyłączyć przewijanie #appkontenera, po prostu dodaj touch-action: none;.

Spróbuj tego

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

Jeśli chcesz zatrzymać przewijanie treści / html, dodaj następującą treść

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>

Zasadniczo można to zrobić bez JS.

Głównym pomysłem jest dodanie html / body o wysokości: 100% i przepełnieniu: auto. a wewnątrz nakładki można włączyć / wyłączyć przewijanie w zależności od wymagań.

Mam nadzieję że to pomoże!

W moim przypadku żadne z tych rozwiązań nie działało na iPhonie (iOS 11.0).

Jedyną skuteczną poprawką, która działa na wszystkich moich urządzeniach, jest ta - ios-10-safari-zapobiegaj-przewijaniu-za-ustaloną-nakładką-i-utrzymuj-przewiń-pozycję

Użyj poniższego kodu, aby wyłączyć i włączyć pasek przewijania.

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