Jak przewijać stronę, gdy okno dialogowe jest dłuższe niż ekran?

Mam w mojej aplikacji modalne okno dialogowe, które może być dość długie w kierunku y. Wiąże się to z problemem, w wyniku którego część zawartości okna dialogowego jest ukryta u dołu strony.

Chciałbym, aby pasek przewijania okna przewijał okno dialogowe, gdy jest wyświetlane i jest zbyt długie, aby zmieściło się na ekranie, ale pozostawić główną część na miejscu za modalem. Jeśli używasz Trello , wiesz, do czego zmierzam.

Czy jest to możliwe bez używania JavaScript do sterowania paskiem przewijania?

Oto CSS, które do tej pory zastosowałem do mojego modalu i okna dialogowego:

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

po prostu użyj

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

zaaranżuje twój modal, a następnie przewinie w pionie

Oto, co naprawiło to dla mnie:

max-height: 100%;
overflow-y: auto;

EDYCJA : Teraz używam tej samej metody, która jest obecnie używana na Twitterze, gdzie tryb modalny działa trochę jak oddzielna strona na górze bieżącej treści, a zawartość za modalem nie przesuwa się podczas przewijania.

W istocie jest to:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

Z tym CSS w trybie modalnym:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Wersja czystego JS (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

Działa to bez względu na wysokość lub szerokość strony lub okna dialogowego modalnego, umożliwia przewijanie bez względu na to, gdzie znajduje się mysz / palec, nie powoduje gwałtownego skoku, niektóre rozwiązania wyłączają przewijanie głównej zawartości i również świetnie wyglądają.

Zmiana position

position:fixed;
overflow: hidden;

do

position:absolute;
overflow:scroll;

Oto moja demonstracja okna modalnego, które automatycznie zmienia rozmiar do zawartości i zaczyna przewijać, gdy nie mieści się w oknie.

Demo okna modalnego (patrz komentarze w kodzie źródłowym HTML)

Wszystko zrobione tylko z HTML i CSS - żaden JS nie jest wymagany do wyświetlania i zmiany rozmiaru okna modalnego (ale nadal potrzebujesz go do wyświetlania okna - w nowej wersji w ogóle nie potrzebujesz JS).

Aktualizacja (więcej dem):

• Okno modalne wyrównane do góry

• Wyśrodkowane okno modalne

• Stare demo, które używa JavaScript

Chodzi o to, aby mieć zewnętrzne i wewnętrzne DIV, gdzie zewnętrzna określa stałą pozycję, a wewnętrzna tworzy przewijanie. (W wersji demonstracyjnej jest więcej DIV, aby wyglądały jak rzeczywiste okno modalne).

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }

Samo ustalone pozycjonowanie powinno rozwiązać ten problem, ale innym dobrym obejściem tego problemu jest umieszczenie modalnych elementów div lub elementów na dole strony, poza układem witryny. Większość wtyczek modalnych nadaje swoje pozycjonowanie modalne, aby umożliwić użytkownikowi przewijanie strony głównej.

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>

Tutaj .. U mnie działa idealnie

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}

prosty sposób możesz to zrobić przez dodanie tego css Więc właśnie dodałeś to do CSS:

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

i działa!

position:fixedoznacza, że ​​cóż, okno modalne pozostanie stałe w stosunku do punktu widzenia. Zgadzam się z twoją oceną, że jest to właściwe w tym scenariuszu, mając to na uwadze, dlaczego nie dodajesz paska przewijania do samego okna modalnego?

Jeśli tak, poprawność max-heighti overflowwłaściwości powinny załatwić sprawę.

W końcu musiałem wprowadzić zmiany w treści strony za ekranem modalnym, aby upewnić się, że przewijanie strony nigdy nie trwało wystarczająco długo.

Gdy to zrobiłem, problemy, które napotkałem podczas stosowania position: absoluteokna dialogowego, zostały rozwiązane, ponieważ użytkownik nie mógł już przewijać strony w dół.

Okno Pasek przewijania strony, który można kliknąć, gdy okno Modalne jest otwarte

Ten działa dla mnie. Czysty CSS.

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

Spróbuj i daj mi znać

Chciałem dodać moją czystą odpowiedź CSS do tego problemu modali z dynamiczną szerokością i wysokością. Poniższy kod działa również z następującymi wymaganiami:

1. Umieść modal na środku ekranu
2. Jeśli tryb modalny jest wyższy niż obszar roboczy, ściemniacz przewijania (nie zawartość modalna)

HTML:

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS / MNIEJ:

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

W ten sposób modal zawsze znajduje się w widocznym obszarze. Szerokość i wysokość modalu są tak elastyczne, jak chcesz. Usunąłem z tego ikonę zamknięcia dla uproszczenia.