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

Question

[Дмитрий Евграфович]

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

На одном из сайтов поставил модальному окну overflow:hidden, а для body оставил прокрутку, но это решение подходит не везде. Или в будущем только отказываться от родных модальных окон бутстрапа?

Answer 1

[Юрий Лобанов]

Есть такой вариант, но он слегка попахивает )
Оборачиваете весь контент в блок и перед открытие модального окна узнаете ширину блока и прописываете этому блоку эту ширину. Исчезновение скролла в таком случае не повлияет на контент. Естественно, при закрытии модального окна ширину надо сбрасывать. Не совсем понимаю, почему скролл исчезает? Для body прописывается overflow:hidden ?

Comments

[Дмитрий Евграфович]

Точно, благодарю за идею! Просто заклинило на возможности реализации стилями и про скрипты не думал. Решение $("body").css("width", $("body").width()) при открытии и, соответственно, установкой auto при закрытии модального окна отлично справляется (правда при задании фона fixed по центру картинка задняя прыгает. но это совсем незаметно, в сравнении с дефолтным вариантом). И да, прыгает из-за того, что при бутстрап весит overflow:hidden на body.

[Юрий Лобанов]

@Tantacula не понятно для меня - зачем? Второй бутстрап этого не делал - специально сейчас проверил. По мне так даже круче выглядело, когда затемненный фон под модальным окно прокручивается. Ну рад, что помог.

Answer 2

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

Answer 3

[Руслан Касымов]

Ну как вариант сделайте горизонтальную прокрутку видимой всегда

body {
    overflow-y: scroll;
}

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

Comments

[Дмитрий Евграфович]

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

[Руслан Касымов]

а если и у модального окна сделать overflow-y: scroll?

[Дмитрий Евграфович]

Появляется две полоски прокрутки на боковушке. Разве что внутри modal-body размещать, но такой вариант тоже не всегда катит (особенно если оформление не белое). Было бы неплохо, если б полосы накладывались одна на другую - прокрутка body на заднем плане нужна только для того, чтобы ширина сайта не менялась при появлении модального окна, но функционала от нее не требуется.

[Руслан Касымов]

Не совсем понимаю в чем у Вас проблема, вот сделал пример jsfiddle.net/9uJMD у диалога нет никаких скролов...

[Дмитрий Евграфович]

@HDApache в вашем примере просто полноценной структуры нет: ни сетки, ни страницы размером больше одного экрана с горизонтальной прокруткой. Посмотрите демку на getbootstrap.com/javascript/#modals . Но решение уже подсказали :)

[JohnyBr]

Дмитрий Евграфович: а не подскажете какое решение?)

[Дмитрий Евграфович]

JohnyBr: собственно, то, что отмечено решением

[JohnyBr]

не совсем понимаю, как это можно реализовать

Answer 4

[Дмитрий Сударкин]

У меня сработало так

1. Убираем дерганье

html {
  overflow-y: scroll;
}

2. Скрываем вторую полосу прокрутки

.modal {
    margin-right: -20px;
}

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