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. div
Nakładki na całą stronę i treśćoverflow: hidden
), ale nie zapobiega div
to przewijaniu.
Jak zapobiec przewijaniu treści / strony, ale przewijaniu wewnątrz kontenera pełnoekranowego?
Odpowiedzi:
Teoria
Patrząc na bieżącą implementację strony Pinterest (może się zmienić w przyszłości), po otwarciu nakładki
noscroll
klasa jest stosowana dobody
elementu ioverflow: hidden
jest ustawiana, a zatembody
nie jest już przewijana.Nakładka (utworzony on-the-fly lub już w środku strony i widoczne poprzez
display: block
, nie ma znaczenia) maposition : fixed
ioverflow-y: scroll
, ztop
,left
,right
ibottom
właściwości ustawione na0
: Ten styl sprawia, że nakładka wypełnić cały rzutnię.div
Wewnątrz nakładki jest zamiast po prostu wposition: static
to 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ąć
noscroll
klasę dobody
(aby właściwość przepełnienia powróciła do wartości początkowej)Kod
(działa poprzez zmianę
aria-hidden
atrybutu nakładki, aby ją pokazać i ukryć oraz zwiększyć jej dostępność).Znaczniki
(przycisk Otwórz)
(przycisk nakładki i zamknięcia)
CSS
JavaScript (wanilia-JS)
Wreszcie, oto kolejny przykład, w którym nakładka otwiera się z efektem zanikania przez CSS
transition
zastosowany doopacity
właściwości. Stosuje się również a,padding-right
aby uniknąć ponownego wlania tekstu pod tekst, gdy pasek przewijania zniknie.CSS
źródło
div
musi mieć styl CSSposition:fixed
i mieć przewijalne pionowe przepełnienie. Z powodzeniem zastosowałemoverflow-y:auto;
i dla iOS pędu / bezwładności przewijania, dodałem-webkit-overflow-scrolling:touch;
do CSS. Użyłemdisplay:block;
,width:100%;
iheight:100%;
CSS, aby mieć widok całej strony.Jeśli chcesz zapobiec przekroczeniu limitu na iOS, możesz dodać pozycję ustaloną do swojej klasy .noscroll
źródło
position:fixed
jest to, że zmieniałem rozmiar mojego głównego ciała. Być może był w konflikcie z innym CSS, aleoverflow:hidden
to wszystko, co było potrzebneNie używaj
overflow: hidden;
nabody
. Automatycznie przewija wszystko do góry. JavaScript też nie jest potrzebny. Skorzystaj zoverflow: auto;
. To rozwiązanie działa nawet z mobilnym Safari:Struktura HTML
Stylizacja
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ęść
div
klawiatury 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 normalnediv
i nie wiedziałoby, dlaczego powinno się skupić na jednym z nich.źródło
html, body { height: 100%; }
(jak w wersji demo), aby działało to poprawnie..offset()
wartości do obliczeń, zostaje pomieszane itp.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:
Obecnie działa w Chrome, Firefox i IE ( caniuse )
Więcej informacji znajdziesz w artykule dla programistów Google .
źródło
overflow-y: scroll
Osiągnąłem kombinację tego z (z twojego dema Codepen). Punkt podniesiony przez @pokrishka jest ważny, ale w moim przypadku nie stanowi to problemu. W każdym razie zastanawiam się, czy implementacje przeglądarek zamierzają uwzględnić ten szczegół w przyszłości. Przekonałem się, że w przeglądarce Firefox zmiana rozmiaru przeglądarki tak, aby modal nie pasował do ekranu, a następnie zmiana jej rozmiaru ponownie, aby działał (tzn. Przewinięcie jest zawarte) nawet po zmianie rozmiaru do pełnego rozmiaru - aż do ponownego załadowania strony , przynajmniej.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: fixed
ustawiają również dynamicznie górę, aby zachować pozycję przewijania:Następnie, gdy ponownie usuniesz nakładkę, musisz zresetować pozycję przewijania:
Stworzyłem mały przykład, aby zademonstrować to rozwiązanie
źródło
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.
źródło
width: 100%; height: 100%;
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:
Zobacz Przewijanie konkretnej zawartości DIV za pomocą głównego paska przewijania przeglądarki, aby zobaczyć, jak działa.
źródło
Wybrana odpowiedź jest poprawna, ale ma pewne ograniczenia:
<body>
w tle<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żnabackground-color
ustawić.Aby to przetestować, usuń komentarz z poniższej linii w przykładzie Codepen:
źródło
W przypadku urządzeń dotykowych spróbuj dodać
101vh
przezroczysty 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
źródło
-webkit-overflow-scrolling:touch;
do każdego przewijanego pojemnika, aby przechwytywać zdarzenia dotykowe.Zachowanie, któremu chcesz zapobiec, nazywa się łańcuchem przewijania. Aby go wyłączyć, ustaw
na twojej nakładce w CSS.
źródło
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. ”
A następnie umieść klasę wyłączania przewijania na div strony:
źródło
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żyjW trybie „nakładki”
JQuery dla przełącznika („body” -> „overlay”):
JQuery dla przełącznika („overlay” -> „body”):
źródło
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%:
źródło
Użyj następującego kodu HTML:
Następnie JavaScript, aby przechwycić i zatrzymać przewijanie:
Następnie, aby przywrócić normalne warunki:
$(".page").off("touchmove");
źródło
Jeśli celem jest wyłączenie na urządzeniach mobilnych / dotykowych, najprostszym sposobem na to jest użycie
touch-action: none;
.Przykład:
(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
#app
kontenera, po prostu dodajtouch-action: none;
.źródło
Spróbuj tego
źródło
Jeśli chcesz zatrzymać przewijanie treści / html, dodaj następującą treść
CSS
HTML
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!
źródło
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ę
źródło
Użyj poniższego kodu, aby wyłączyć i włączyć pasek przewijania.
źródło