Zapobiegaj przewijaniu ciała, ale zezwalaj na przewijanie nakładki

446

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?

PotatoFro
źródło
czy nie jest to po prostu wtyczka „nakładki”, taka jak setki osób używających pozycji ustalonej za pomocą funkcji overflow-y scroll?
ggzone
3
Link do Pinteresta nie pomaga, ponieważ jego treść znajduje się za ścianą logowania.
2540625
4
Aktualizacja 2017: nawet jeśli zalogujesz się na Pinterest, odkryjesz, że efekt nakładki opisany w OP już nie istnieje - zamiast tego po kliknięciu obrazu przechodzisz na zwykłą stronę z dużą wersją obrazu.
Annabel

Odpowiedzi:

624

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; 
}
Fabrizio Calderan
źródło
6
To jest poprawna odpowiedź. Ktoś powinien dać mu znak wyboru, ponieważ jest poprawny.
Scoota P
64
Jest to absolutnie poprawne, ale ostrzegamy, że nie działa w mobilnym safari. Tło będzie się nadal przewijać, a twoja nakładka zostanie naprawiona.
a10s
20
To działa dobrze. Przewijalny kontener rzutni divmusi mieć styl CSS position:fixedi mieć przewijalne pionowe przepełnienie. Z powodzeniem zastosowałem overflow-y:auto;i dla iOS pędu / bezwładności przewijania, dodałem -webkit-overflow-scrolling:touch;do CSS. Użyłem display:block;, width:100%;i height:100%;CSS, aby mieć widok całej strony.
Slink
10
Przepraszam nie rozumiem. Ustawienie przepełnienia ciała: ukryty nie wyłącza elastycznego przewijania ciała na moim iPadzie iOS7. Więc musiałem dodać w swoim js: document.body.addEventListener ('touchmove', function (event) {event.preventDefault ();}, false); który SADLY wyłącza również przewijanie wszystkich elementów. Jak dotąd nie znalazłem żadnego rozwiązania (bez dodatkowych wtyczek)
Garavani
22
Jeśli użytkownik już przewinął ciało w dół do dołu, gdy aktywowana jest nakładka, spowoduje to, że ciało przeskoczy do góry po ustawieniu przepełnienia: ukryty; Jakiś sposób na to?
Björn Andersson,
75

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

body.noscroll{
    position:fixed;
    overflow:hidden;
}
am80l
źródło
106
Dzięki temu rozwiązaniu, ze względu na ustaloną pozycję, treść automatycznie przewinie się do góry treści. Może to być niepokojące dla użytkowników.
tzi
5
Innym problemem związanym z używaniem position:fixedjest to, że zmieniałem rozmiar mojego głównego ciała. Być może był w konflikcie z innym CSS, ale overflow:hiddento wszystko, co było potrzebne
Dex
3
przerywa to przeskakiwanie, gdy
tabulujesz
@ Atav32 Brzmi jak osobny problem, pozycja i przepełnienie nie powinny wpływać na kolejność tabulatorów.
am80l,
@ am80l przepraszam, mój poprzedni komentarz był bardzo niejasny: kolejność kart działa, ale ekran wstrząsa, gdy
tabulujesz
44

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.

Lucia
źródło
5
fajne rozwiązanie, ale potem muszę owinąć całą moją zawartość w div, czego nie miałem zamiaru robić ...
Jacob Raccuia
2
To idealne rozwiązanie. Jeśli ktoś ma z tym problem, może być konieczne dodanie html, body { height: 100%; }(jak w wersji demo), aby działało to poprawnie.
Jan
4
@ user18490 część kątowa / materiałowa nie ma nic wspólnego z faktem, że to rozwiązanie działa.
Lucia,
10
To łamie UX urządzeń mobilnych na wiele sposobów (np. Ukrywanie paska URL, Overscroll Affordance, ...), a nawet spację do przewijania na komputerach.
pewno
2
Jest to bardziej niezawodna opcja, ale komplikuje to trochę. Na przykład PageUp i PageDown nie będą działać przy odświeżaniu. wszystko, co wykorzystuje .offset()wartości do obliczeń, zostaje pomieszane itp.
BlackPanther
42

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 .

Igor Alemasow
źródło
4
Przeszedłem całą drogę, aby powiedzieć, że działa to na najnowszych Chrome, Mozilla i Opera. Baw się dobrze!
Wannabe JavaGeek
3
Ktoś powinien dodać za to nagrodę. To jest właściwe rozwiązanie. Nie wymaga JavaScript. :)
joseph.l.hunsaker
9
Problem z tym rozwiązaniem polega na tym, że działa ono tylko wtedy, gdy można przewijać nakładkę. Jeśli masz modal i wszystko pasuje do ekranu, więc w środku nie ma przewijania - nie zatrzyma on przewijania ciała. To też nie działa w Safari :)
waterplea
1
overflow-y: scrollOsią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.
Marc.2377
33

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>

Philipp Mitterer
źródło
To wydaje mi się najbardziej eleganckim rozwiązaniem. Wiem, że Google stosuje te same sztuczki, często przewijając stronę i przenosząc elementy.
forallepsilon
To jest jedyne rozwiązanie, które działało w 100% poprawnie dla mnie, chciałbym znaleźć tę odpowiedź wcześniej.
user0103
31

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;
}
Francisco Hodge
źródło
W systemie iOS musisz także ustawićwidth: 100%; height: 100%;
Gavin
2
Nie rozwiązuje to problemu występującego również w wielu innych rozwiązaniach tego pytania - jeśli okno jest przewijane w dowolnym miejscu poza górą strony, gdy modal jest otwarty, spowoduje przewijanie do góry strony. Znalazłem tutaj rozwiązanie Philipp Mitterer, które jest najlepszą opcją, która obejmuje większość przypadków.
CLL,
1
Nigdy nie spotkałem się z tym problemem, o którym mówisz (w Internecie ani na urządzeniach mobilnych). Czy możesz udostępnić pełny kod (z DOM), który nie działa w skrzypcach lub jsbin? W każdym razie nieufnie używam obejść Javascript do rozwiązania tego problemu.
Francisco Hodge
7

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.

NGLN
źródło
1
Najlepsze rozwiązanie, prawdziwe myślenie „po wyjęciu z pudełka”, po prostu nie tak dobrze sformułowane.
Mark
Jeśli treść nie jest przewijanym elementem, paski górne nie będą się przesuwać w górę na urządzeniach mobilnych podczas przewijania w dół na stronę.
Seph Reed
7

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; */
}
Weston
źródło
4

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

YarGnawh
źródło
Jup, to załatwiło sprawę. Po prostu musiałem dodać -webkit-overflow-scrolling:touch;do każdego przewijanego pojemnika, aby przechwytywać zdarzenia dotykowe.
Mati
Nadal mogę przewijać na telefonie iPhone
Simone Zandara,
@SeniorSimoneZandara Nie jestem. działa to dobrze, aby zapobiec przewijaniu w tle
godblessstrawberry
3

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

overscroll-behavior: contain;

na twojej nakładce w CSS.

黄 雨伞
źródło
3

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">
TheFullResolution
źródło
2

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"});
Christk
źródło
1

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");
}
Vic Seedoubleyew
źródło
1

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

Damir Kotoric
źródło
1

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

Gajus
źródło
1
Jeśli akcja dotykowa faktycznie działała na iOS, to znaczy. W takim przypadku nie byłoby potrzeby umieszczania całej „aplikacji” w osobnym pliku div.
powerbuoy
0

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", "");
            });
Junaid
źródło
0

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!

Ashwin
źródło
-2

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();
Rakesh Chaudhari
źródło