bootstrap modal видаляє смугу прокрутки

Коли я запускаю модальний перегляд на моїй сторінці, це змушує смугу прокрутки зникати. Це дратівливий ефект, оскільки фонова сторінка починає рухатися, коли модальний пристрій входить / зникає. Чи існує ліки від цього ефекту?

Це функція, клас modal-openдодається до HTMLbody коли ви показуєте модаль, і видаляється, коли ви його приховуєте.

Це змушує смугу прокрутки зникати, оскільки в bootstrap css сказано

.modal-open {
    overflow: hidden;
}

Ви можете замінити це, вказавши

.modal-open {
    overflow: scroll;
}

у власному css.

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

.modal-open {
  overflow: inherit;
}

я використав

.modal-open {
  overflow-y: scroll;
}

У цьому випадку ви уникаєте відображення горизонтальної смуги прокрутки

Краще використовувати overflow-y: прокручуйте та видаляйте відступ із тіла, модальний спосіб завантаження додає відступ до тіла сторінки.

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

Сумісний з браузером IE: браузер IE робить те саме за замовчуванням.

Слава Богу, я натрапив на цей пост! Я висмикував волосся, намагаючись зрозуміти, як повернути смуги прокрутки назад, закриваючи вікно, використовуючи моє тісне посилання. Я спробував пропозиції щодо CSS, але він просто не працював належним чином. Після читання

class modal-open додається до тіла HTML, коли ви показуєте модаль, і видаляється, коли ви його приховуєте. - @flup

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

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

Я просто грав з цією "особливістю" модалів Bootstrap. Здається, .modalклас має, overflow-y:auto;отже, модальний обгортник отримує власну смугу прокрутки, коли сам модальний стає високим.

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

body {
    overflow-y:scroll;
}

Потім обробіть .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

Залиште смугу прокрутки відключеною на тілі в цілому недоторканим

Всі інші відповіді на цій сторінці постійно змушували мій вміст стрибати.

Вгору!

Незважаючи на те, що це рішення працювало у мене весь час, вчора у мене виникла проблема з використанням цього виправлення, коли модаль можна перетягнути і збільшити, щоб розмістити на екрані (вертикально). Це може мати щось спільне з position:stickyелементами, які я додав?

Краще, якщо ви створите власний файл css для налаштування певної частини вашого завантажувального пакету.

Не змінюйте css-файл bootstrap, оскільки він змінить все у вашому bootstrap, як тільки ви використаєте його в інших частинах сторінки.

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

Щоб уникнути його приховування при відкритті модальної версії, просто перевизначте його, помістивши код css (нижче) у свій власний файл css.

.modal-open {
    overflow: scroll;
}

просто навпаки ...

.modal-open {
    overflow: hidden;
}

Крім того, якщо модальне спливаюче вікно має прокручувати вміст всередині, а батьківський повинен залишатися нерухомим, додайте наступне до вашого Custom.css (перевизначення css)

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

модаль bootstrap додає відступ після того, як він відкриється, щоб ви могли спробувати цей код у власному css

.modal-open {
    padding: 0 !important;
}

Можливо, це спричинено тим, що 1-й модальний (у закритому стані) видаляє модально-відкритий клас із елемента body, а другий не додає його назад при активації modal-open.

У цьому випадку я б використовував подію, щоб перевірити, чи модал повністю закритий / прихований, і відкрити інший

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

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

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

Однак я вважаю, що ці способи обробки CSS трохи неелегантні. Хіба що, тобто, ви спеціально не хочете зберегти смуги прокрутки (хоча я не можу придумати причини для цього).

По суті, Bootstrap застосовує відступ до певних елементів для компенсації видалення смуги прокрутки.

Отже, все, що вам потрібно зробити, - це розмістити додаткову обгортку з нульовим відступом навколо вашого проблемного елемента (і перемістити до нього клас, на який націлено).

тобто змінити від цього ...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... до цього...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>

Єдина відповідь, яка мені спрацювала, така:

.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}