bootstrap modal удаляет полосу прокрутки

Когда я запускаю модальное представление на своей странице, полоса прокрутки исчезает. Это раздражает, потому что фоновая страница начинает двигаться, когда модальное окно перемещается / исчезает. Есть ли лекарство от этого эффекта?

Это особенность, класс modal-openдобавляется в HTML, bodyкогда вы показываете модальное окно, и удаляется, когда вы его скрываете.

Это приводит к исчезновению полосы прокрутки, поскольку 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, но он просто не работал должным образом. После чтения

Класс 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 для настройки определенной части вашего bootrap.

Не изменяйте css-файл начальной загрузки, потому что он изменит все в вашем начальном файле, как только вы будете использовать его в других частях страницы.

Если ваша страница несколько длинная, на ней автоматически появится полоса прокрутки. И когда модальное окно открывается, оно скроет полосу прокрутки, потому что это то, что бутстрап делает по умолчанию.

Чтобы не скрывать его при открытии модального окна, просто переопределите его, поместив код 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;
}

модальное окно начальной загрузки добавляет отступ после открытия, чтобы вы могли попробовать этот код в своем собственном CSS

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

Вероятно, это вызвано тем, что 1-й модальный (при закрытии) удаляет модально-открытый класс из элемента тела, а второй не добавляет его обратно при запуске модального-открытого.

В этом случае я бы использовал событие, чтобы проверить, полностью ли закрыт / скрыт модальный, и открыть другой

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

Это будет ждать до закрытия 1-го модального окна, чтобы убедиться, что модальное окно удалено из тела и повторно добавлено при открытии.

У меня сама была эта проблема, и ответ на этот вопрос быстро помог мне понять, что вызывает такое поведение. Так что спасибо.

Однако я считаю эти обходные пути CSS немного неэлегантными. Если, конечно, вы специально не хотите сохранить полосы прокрутки (хотя я не могу придумать причину для этого).

По сути, Bootstrap применяет padding-right к определенным элементам для компенсации удаления полосы прокрутки.

Следовательно, все, что вам нужно сделать, - это поместить дополнительную оболочку с нулевым отступом вокруг проблемного элемента (и переместить целевой класс к нему).

т.е. изменение от этого ...

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