1

Использую Bootstrap модальные окна. Установил на сайт онлайн-консультант и при открытии модального окна пропадает скролл прокрутки и происходит сдвиг бирки (онлайн-консультанта) на ширину скролла.

Что нужно добавить из CSS к этой бирке , чтобы не было сдвига ?

3
  • 2
    Добавьте ваш код в вопрос
    – soledar10
    21 мая 2017 в 16:28
  • Я так понимаю, у вас на сайте шапка с position: fixed; ?
    – Игорь
    22 мая 2017 в 8:47
  • При открытии Bootstrap модального окна , скрывается scroll и в body подставляется padding-right:Xpx (ширина скролла). Походу к бирке онлайн консультанта , тоже нужно подставлять этот же отступ. Но как ? ru.stackoverflow.com/questions/668996/…
    – Xzizz
    22 мая 2017 в 10:10

2 ответа 2

1

Скорее всего, поможет один из следующих вариантов:

body.modal-open {
  margin-right: 17px;
}
body[style*="overflow: hidden"] {
  margin-right: 17px;
}

Если нет, подбирай правильный селектор.

4
  • лучше body.modal-open, имхо 18 мар 2021 в 8:22
  • @humster_spb, ну смотря что скрипт добавляет. Только один из этих вариантов будет работать. Я как-то привык, что обычно появляется инлайном.
    – Qwertiy
    18 мар 2021 в 8:54
  • Бутстрап при открытии модалки добавляет body именно этот класс. Поскольку автор уточнил, что использует бутстрап, я и отметил, что вариант с классом, на мой взгляд, оптимальнее 18 мар 2021 в 9:00
  • @humster_spb, ok, обновил ответ.
    – Qwertiy
    18 мар 2021 в 12:29
0

Была похожая проблема на сайте.

Решение довольно простое:

html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {
    -webkit-overflow-scrolling: touch;}
html { overflow-y: scroll !important; }

Или вот ещё вариант:

html.pum-open.pum-open-overlay.pum-open-scrollable body>[aria-hidden] {
padding-right: 0 !important;
    -webkit-overflow-scrolling: touch;}
html { overflow-y: scroll !important; }

Можно немного пожонглировать и подобрать комбинацию под себя))

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.