Я пытаюсь перейти на новую версию Bootstrap 5 (с Bootstrap 3), но у меня возникли проблемы с обработкой полос прокрутки, и я хочу посмотреть, как люди справляются с этой проблемой.
Когда на экране длинный контент, появляется полоса прокрутки по оси Y.
Когда вы открываете какие-либо модальные окна, полоса прокрутки исчезает, поскольку для переполнения установлено значение скрытое. И когда это происходит, весь контент смещается вправо, занимая дополнительное пространство. Чтобы противостоять этому дополнению, право добавляется автоматически.
Раньше в BS3, когда модальные окна были открыты, весь экран отключался, а полоса прокрутки для родительского элемента (если таковая имеется) все еще была видна ПОД модальное наложение.
Это было идеально, поскольку на родительском экране не было проблем с размером экрана, поскольку полосы прокрутки всегда были видимы, а дочерний элемент впереди мог иметь полосу прокрутки для себя при необходимости.
Проблема заключается в следующем.
Теперь, в BS5.3, если вы хотите, чтобы полосы прокрутки отображались для родителя, вам необходимо удалить переполнение скрыто, но при этом вы можете прокручивать родительское представление.
Единственный способ предотвратить прокрутку фона — установить скрытое переполнение.Это может работать нормально только для элементов управления BS5.3 или чего-либо, что было создано для него, но для любых других элементов управления, не относящихся к BS, возникают проблемы, когда содержимое на экране смещается каждый раз, когда полоса прокрутки отображается или скрывается.< /p>
Например, использование всплывающего уведомления, когда модальное окно открыто и закрыто.
Когда модальное окно открыто, полосы прокрутки скрыты, поэтому всплывающее уведомление уведомление появляется в центре экрана. Модальное окно теперь закрывается, появляются полосы прокрутки, а всплывающее уведомление смещается влево, чтобы соответствовать только что добавленной полосе прокрутки.
То же самое и с модальным окном, отличным от BS. Когда вы закрываете модальное окно, появляется полоса прокрутки, которая смещает модальное окно влево до завершения анимации закрытия.
Я не уверен, как работала предыдущая версия BS3, но есть ли она? способ получить старое поведение, при котором родительские полосы прокрутки отображаются, но отключаются, когда в верхней части экрана есть модальное окно?
Из того, что я вижу в DevTools, для BS3, зависание над HTML элемент (самый верхний элемент) показывает, что выбран ВЕСЬ экран, включая полосы прокрутки, но в BS5.3 при наведении курсора на элемент HTML выделяется все, КРОМЕ полос прокрутки, поэтому на них невозможно нацелиться.
Я не уверен, является ли это особенностью макета flexbox для BS5.3 и есть ли какие-нибудь обходные пути.
Кто-нибудь знает, как я могу отключить родительскую полосу прокрутки позади модальное наложение, пока оно все еще видимо, чтобы не портить стиль?
Подробнее здесь: https://stackoverflow.com/questions/790 ... th-overlay
Полоса прокрутки Bootstrap 5.3 – предотвращает перемещение, скрываясь под наложением ⇐ CSS
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Вертикальная полоса прокрутки в React-Bootstrap Accordion Body не кликабельна
Anonymous » » в форуме CSS - 0 Ответы
- 39 Просмотры
-
Последнее сообщение Anonymous
-