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

Я

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

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

думаю, что наследование лучше, чем свиток потому что, когда вы открываете модальный, он всегда будет открываться со свитком, но когда у вас нет никаких свитков, вы получите ту же проблему. Поэтому я просто делаю это:

.modal-open {
  overflow: inherit;
}

слава богу, я пришел на этот пост! Я вытаскивал волосы, пытаясь понять, как вернуть мои полосы прокрутки при закрытии окна, используя мою собственную близкую ссылку. Я пробовал предложения для CSS, но он просто не работал должным образом. После прочтения

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

Я придумал решение с помощью jQuery, так что если кто-то еще имеет ту же проблему и приведенные выше предложения не работают --

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

лучше использовать overflow-y: прокрутите и удалите заполнение из тела, bootstrap modal добавил заполнение в тело страницы.

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

браузер IE совместим, браузер IE делает то же самое по умолчанию.

Я просто играл с этой "особенностью" 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 файл для настройки определенной части вашего bootsrap.

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

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

чтобы не скрывать его при модальном открывается, просто переопределите его, поместив код css (ниже) в свой собственный файл css.

.modal-open {
    overflow: scroll;
}

только наоборот...

.modal-open {
    overflow: hidden;
}

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

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

кроме того, если модальное всплывающее окно должно прокручиваться с содержимым внутри, а родитель должен оставаться неподвижным, добавьте следующее в свой пользовательский интерфейс.css (переопределение css)

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