Задать вопрос
Tantacula
@Tantacula
bootstrap

Модальные окна Bootstrap 3 и полосы прокрутки — в чем может быть проблема?

При вызове модального окна в бутстрапе страница дергается из-за исчезновения боковых полос прокрутки. Дергается в опере, хроме и мозилле. В эксплорере 11 к этому делу красиво подошли и полосы сделали не в окне, а поверх него, но им мало кто пользуется, а потому вопрос: можно ли как-то красиво обойти это дергание без ущерба функционалу?

На одном из сайтов поставил модальному окну overflow:hidden, а для body оставил прокрутку, но это решение подходит не везде. Или в будущем только отказываться от родных модальных окон бутстрапа?
  • Вопрос задан
  • 15064 просмотра
Комментировать
Подписаться 5 Оценить Комментировать
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Есть такой вариант, но он слегка попахивает )
Оборачиваете весь контент в блок и перед открытие модального окна узнаете ширину блока и прописываете этому блоку эту ширину. Исчезновение скролла в таком случае не повлияет на контент. Естественно, при закрытии модального окна ширину надо сбрасывать. Не совсем понимаю, почему скролл исчезает? Для body прописывается overflow:hidden ?
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 3
@zyets
Тоже столкнулся с подобной бедой, только, очевидно, наоборот!...
В моем случае было так:

Я всегда ставлю принудительно:
html{
	overflow-y: scroll;
	overflow-x: auto;
}


Для того, чтоб показывать полосу прокрутки на всех страницах. Зачем? Вот тут можно почитать:
xiper.net/collect/html-and-css-tricks/css-tricks/t...

В свою очередь в Bootstrap, при открытии модального окна, скролл-бар у html отключается (зачем и каким образом хз, не лез в такие дебри)
Чтобы не был дергания, бутстрап ставит для body заглушку в виде padding-right: 15px; на время открытого окна!
Поэтому в моем случае это лечится одной строчкой css:
body{
	padding-right: 0 !important;
}
Ответ написан
Комментировать
Комментировать
HDApache
@HDApache
PHP программист
Ну как вариант сделайте горизонтальную прокрутку видимой всегда

body {
    overflow-y: scroll;
}


Тогда ширина body не будут меняться если вдруг появится или исчезнет контент, соответственно диалог не будет перестраиваться и как следствие дерганья не будет...
Ответ написан
8 комментариев
8 комментариев
GrozInventor
@GrozInventor
У меня сработало так

1. Убираем дерганье
html {
  overflow-y: scroll;
}

2. Скрываем вторую полосу прокрутки
.modal {
    margin-right: -20px;
}

Единственное: При большом количестве контента в модале, не видно прокрутки. Но в моем случае - это не столь важно...
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Разработчик Elma
AUXO
До 250 000 ₽
Python team lead
Uptrade
от 200 000 до 300 000 ₽
Системный аналитик
Uptrade • Москва
от 200 000 до 250 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн двух страничного сайта в фигма
18 апр. 2024, в 14:06
8000 руб./за проект
Разработка Event Calendar
18 апр. 2024, в 13:55
20000 руб./за проект
Фронтенд и скрипты мобильного приложения на Flutter или ReactNative
18 апр. 2024, в 13:47
50000 руб./за проект
Ещё заказы