Як прокрутити сторінку, коли модальний діалог довший за екран?

У моєму додатку є модальне діалогове вікно, яке може тривати досить довго в напрямку у. Це створює проблему, через яку частина вмісту діалогового вікна прихована внизу сторінки.

Я хотів би, щоб смужка прокрутки вікна прокручувала діалогове вікно, коли воно відображається і занадто довге, щоб вміститися на екрані, але залишити основний корпус на місці за модальним. Якщо ви використовуєте Trello, то знаєте, на що я йду.

Чи можливо це без використання JavaScript для управління смугою прокрутки?

Ось CSS, який я застосував до модальних та діалогових вікон:

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

просто використовуйте

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

він впорядкує ваш модальний, а потім надасть йому вертикальний прокрутку

Ось що мені це виправили:

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

РЕДАГУВАТИ : Зараз я використовую той самий метод, який зараз використовується в Twitter, де модаль діє начебто окрема сторінка поверх поточного вмісту, а вміст позаду модала не рухається під час прокрутки.

По суті це:

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

За допомогою цього CSS на модальному рівні:

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

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Чиста версія JS (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

Це працює незалежно від висоти чи ширини сторінки або модального діалогу, дозволяє прокручувати незалежно від того, де знаходиться ваша миша / палець, не має стрибкоподібних стрибків деяких рішень, які вимикають прокрутку основного вмісту, і також чудово виглядає.

Зміна position

position:fixed;
overflow: hidden;

до

position:absolute;
overflow:scroll;

Ось моя демонстрація модального вікна, яке автоматично змінює розмір до свого вмісту і починає прокручувати, коли воно не підходить до вікна.

Демонстрація модального вікна (див. Коментарі у вихідному коді HTML)

Все зроблено лише з HTML і CSS - для відображення та зміни розміру модального вікна не потрібен JS (але він все одно потрібен для відображення вікна - в новій версії JS взагалі не потрібен).

Оновлення (більше демонстраційних версій):

• Модальне вікно, вирівняне по верху

• Центроване модальне вікно

• Стара демонстрація, що використовує Javascript

Справа в тому, щоб мати зовнішній і внутрішній DIV, де зовнішній визначає фіксоване положення, а внутрішній створює прокрутку. (У демонстрації насправді є більше DIV, щоб вони виглядали як справжнє модальне вікно.)

        #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 */
        }

фіксоване позиціонування повинно було вирішити цю проблему, але ще одним хорошим обхідним шляхом, щоб уникнути цієї проблеми, є розміщення модальних div-елементів або елементів внизу сторінки, не в межах макета веб-сайтів. Більшість модальних плагінів надають абсолютне модальне позиціонування, що дозволяє користувачеві продовжувати прокручувати головну сторінку.

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


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

        </body>
</html>

Ось .. Для мене ідеально працює

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

простий спосіб зробити це, додавши цей css Отже, ви щойно додали це до CSS:

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

і це працює!

position:fixedозначає, що модальне вікно залишатиметься фіксованим щодо точки огляду. Я погоджуюсь з вашою оцінкою, що це доречно у цьому сценарії, маючи на увазі, чому ви не додаєте смужку прокрутки до самого модального вікна?

Якщо так, виправте, max-heightі overflowвластивості повинні зробити трюк.

Врешті-решт мені довелося внести зміни до вмісту сторінки за модальним екраном, щоб переконатись, що вона ніколи не вистачала для прокрутки сторінки.

Щойно я це зробив, проблеми, з якими я зіткнувся під час звернення position: absoluteдо діалогового вікна, були вирішені, оскільки користувач більше не міг прокручувати сторінку вниз.

На панелі прокрутки сторінки вікна можна натиснути, коли відкрито Modal

Цей працює для мене. Чистий CSS.

<style type="text/css">

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

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

</style>

Спробуйте і дайте мені знати

Я хотів додати свою чисту відповідь CSS до цієї проблеми модалів з динамічною шириною та висотою. Наступний код також працює з наступними вимогами:

1. Помістіть модаль в центр екрана
2. Якщо модальний режим перевищує область перегляду, прокрутіть затемнення (не модальний вміст)

HTML:

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

CSS / МЕНШЕ:

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

Таким чином, модаль завжди знаходиться в області перегляду. Ширина та висота модального обладнання настільки гнучкі, на скільки вам подобається. Для простоти я вилучив із цього свою піктограму закриття.