Bootstrap 3 модально спрацьовує і змушує сторінку миттєво зміщуватися вліво / проблеми з смугою прокрутки браузера

78

Я працюю на сайті за допомогою Bootstrap 3.1.0.

Ви помітите, коли модальне вікно відкриється, смужка прокрутки браузера просто зникає на частку секунди, а потім повертається. Це робить те саме, коли ви закриваєте його.

Як я можу зробити так, щоб він просто відкривався і закривався без взаємодії з смугою прокрутки браузера. Я бачив дописи у стеку, де люди мали проблеми, але я не можу знайти відповідь на конкретну проблему, тому, якщо хтось ще зробив цей запит, а хтось знає про це і хоче прив’язати мене до нього, я був би вдячний це. Я шукав це близько 2 годин, перш ніж опублікувати.

html  twitter-bootstrap  responsive-design  twitter-bootstrap-3 
— Деніел Уайт
джерело
Очевидно, ця проблема була виправлена ​​у версії 3.2.0 Bootstrap.
— devius
3
Мабуть, ні (2016). Майбутнім читачам слід сортувати відповіді за Голосами, оскільки прийнята відповідь не найкраща відповідь. Дивіться цю відповідь і, можливо, також цю
— cssyphus
Досі не виправлено 3.3.6, тож спасибі за голови @gibberish!
— arjs
Працює чудово в 2017 році.
— lowtechsun

Відповіді:

22

це те, що я знайшов у github, коли шукав цю проблему, і для мене це добре працює

js:

    $(document).ready(function () {
    $('.modal').on('show.bs.modal', function () {
        if ($(document).height() > $(window).height()) {
            // no-scroll
            $('body').addClass("modal-open-noscroll");
        }
        else {
            $('body').removeClass("modal-open-noscroll");
        }
    });
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeClass("modal-open-noscroll");
    });
})

css використовуйте цей css, якщо у вас є nav-fixed-top та navbar-fixed-bottom :

body.modal-open-noscroll
{
    margin-right: 0!important;
    overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
    margin-right: 0!important;
}

або користуйтеся цим css, якщо у вас є navbar-default

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}
— користувач4314713
джерело
4
Працювало у мене, але мені довелося змінити право на поле на відступ
— GhostRider
@GhostRider: Дякую. Мені довелося випадково запобігти запас.
— Брайан Кейтс
Плюс одна для фіксованого верхнього / фіксованого нижнього, жодна з інших відповідей не працювала для цього сценарію.
— Тіно Макларен
1
Відповідь @FutureReaders ben.kaminski , нижче, містить однорядкове рішення css, яке має бути прийнятою відповіддю.
— cssyphus
92 
.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

Позбудеться від цього. Це було додано, щоб модалі працювали швидше, щоб ви могли прокрутити вниз і побачити модаль, якщо екран був занадто коротким. Це також перешкоджає прокрутці фону, коли закінчується модаль. Якщо вам не потрібна ця функціональність, ви можете використовувати той css, який я розмістив.

Дещо більше: вони встановлюють .modal-open на тілі, що запобігає всій прокрутці на тілі та приховує смугу прокрутки тіла. Потім, коли модаль з’являється, він має темний фон, який займає весь екран, і який має overflow-y: scroll, що змушує панель прокрутки повертатися назад, тому, якщо модальний розширений пройшов нижню частину екрана, ви все ще можете прокрутити темному тлі і подивіться решту.

— cjd82187
джерело
11
Можливо, ви захочете включити цей CSS у медіа-запит лише для настільних ПК, тому у вас буде кращий стиль Boostrap 3 для роботи на мобільному телефоні.
— cjd82187
1
сторінка тепер не зміщується вліво, але тепер у нас є більше вертикальних смуг прокрутки !!!.
— Laxman
1
Працює, але додає другу смугу прокрутки.
— emzero
Ідеально Швидко і просто. Дякую
— coggicc 02
2
Також додайте відступ , .modal-open { overflow: auto; padding-right: 0px !important; }як сказав @ ben.kaminski, який позбавляє від повністю зміщення лівої проблеми. Надія допомагає.
— Shaiju T
74

Виправити зміну лівої проблеми легко зробити, використовуючи лише CSS.

.modal-open[style] {
padding-right: 0px !important;
}

Ви просто переписуєте вбудований стиль, який існує в коді. Я використовую свій у збірці WordPress, і вбудований стиль застосовувався до тіла. Виглядав так:

<body class="home blog logged-in modal-open" style="padding-right: 15px;">

Сподіваюся, це комусь допомагає!

— бен.камінський
джерело
У мене також була така ж проблема в IE. Це додало б стиль підбивання вправо. Ймовірно, тому, що я нав'язую вертикальну смугу прокрутки. Незалежно від цього, це виправлено, дякую!
— slopapa
Дякую Бену - це теж мені допомогло!
— DaniB
6
Це в поєднанні з переповненням: автоматичне виправлення вище робить для мене фокус.
— DPac
2
2016, і це працює (коли ви також враховуєте переповнення.) Велике спасибі!
— arjs
1
Це має бути прийнятою відповіддю у 2020 році. Дякую!
— Нік Ван Брант,
39 
.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

.modal-open[style] {
    padding-right: 0px !important;
}

Завдяки Бену та CJD.

Наведений вище код, здається, працює для мене.

— Тоні С.
джерело
Я вважаю, що це не реальна відповідь, і ви розмістили повідомлення, оскільки ще не можете коментувати. Але будь ласка, запасіться терпінням.
— Cem Özer
Працював у мене в 2016 році! Дякую
— GhostRider
2017 та Bootstrap 4, невеликий зсув все ще є з модалями. Це все ще вирішує проблему, дякую!
— DaveK
використовуючи bootstrap 4.2.1, ця проблема все ще існує, і ця відповідь її виправила. Дякую!
— ellaRT
8

Про це повідомляється проблема завантаження: https://github.com/twbs/bootstrap/issues/9855

І це моє тимчасове швидке виправлення, і це також працює за допомогою фіксованої верхньої панелі навігації, лише за допомогою JavaScript. Завантажте цей сценарій разом зі своєю сторінкою.

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

Ось робочий приклад: http://jsbin.com/oHiPIJi/64

— Агні Прадхарма
джерело
Чудово працює з останньою версією Bootstrap, протестованою в останній версії Chrome, Firefox та Opera. Не дивився на це за допомогою Safari чи IE.
— lowtechsun
Саме те, що мені було потрібно. Це і це: .modal { overflow: auto; } .modal-open { overflow: auto; } .modal-open[style] { padding-right: 0px !important; } я намагався випустити модаль з іншого, і зміна подвоїлася. Дякуємо за пораду.
— Aelys
7

Якщо ви зафіксували панель навігації і не хочете прокручувати тіло доверху, коли відкрито модаль, використовуйте цей стиль

.modal-open {
    overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}
— реферат
джерело
7

Жоден з елементів на цій сторінці не працював для мене у версіях 3.3.4 та 3.3.5 Додавання цього CSS вирішило проблему для мене.

body {
padding-right:0px !important;
margin-right:0px !important;
}
— Запаморочення
джерело
5

для вирішення проблеми, через яку сторінка зміщується вправо

html, body{
  padding: 0 !important;
}
Розгорніть фрагмент

— Феміоке Антоній
джерело
Ну, фрагмент насправді нічого не показує. Додайте кілька кольорових блоків, щоб показати ефект того, що ви дали.
— Ал.Г.
Це те, що мені вдалося - не інші overflow-y:autoвідповіді.
— ген b.
Працював і у мене. Інші рішення - ні.
— Біллі Рей Валентайн
4 
$('body').on('show.bs.modal', function () {
    if ($("body").innerHeight() > $(window).height()) {
        $("body").css("margin-right", "17px");
    }
}); 

$('body').on('hidden.bs.modal', function (e) {
    $("body").css("margin-right", "0px");
});

Це невелике виправлення імітує смугу прокрутки, коли відображається модаль, додаючи праворуч поля до основного.

— hect0r90
джерело
1
Поле вправо не повинно мати фіксованого значення пікселя, оскільки ширина смуги прокрутки залежить від браузера.
— lowtechsun
Ширина смуги прокрутки змінюється залежно від масштабування браузера. Потрібно використовувати цей сценарій у поєднанні з таким сценарієм визначення розміру смуги прокрутки, як цей
— Kunal,
4

Це рішення працює для мене !!!!

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


.modal-open[style] {
padding-right: 0px !important;
}
— Джигар Бхатт
джерело
4

Жодне з вищезазначеного не працювало, а інші години досліджень. Але наступний код чудово працював лише з трохи CSS. Вищезазначене не призведе до видалення вбудованого стилю: 17px; з JS або jquery я міг додати 0 відступів, але не мав ефекту.

.modal-open {
  padding-right: 0px !important;
  overflow-y: scroll;
  width: 100%;
  display: block;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  outline: 0;
  padding-right: 0 !important;
}
— Кори Б
джерело
Це робить сторінку з смугою прокрутки другою смугою прокрутки, коли відкрито модаль. І якщо у вас є другий модаль на відкритому модалі, смужка прокрутки першого модалу буде відсутня після закриття другого.
— Лацек
3 

html, body{
    padding-right: 0px !important; 
    position: relative!important;
}
Розгорніть фрагмент

спробуйте цей код, він справді працює

— звір.ніл
джерело
Хоча це не найкрасивіший спосіб це виправити, він справді працює
— Сандер Ван Кір,
просто щоб вирішити проблему з модальною необхідністю коригувати стилі мого тіла, що може порушити багато інших речей, але, пекло, це спрацювало для мене +1
— Сайєд Аббас Різві,
3

У мене була проблема з Bootstrap 4. У мене є, html { overflow-y: scroll; }і я думаю, що це проблема, але після додавання .modal-open[style] { padding-right: 0px !important; }до мого локального css-файлу все працює ідеально!

.modal-open[style] { 
    padding-right: 0px !important; 
}
Розгорніть фрагмент

— Seldo97
джерело
Мені вдалось ідеально, дякую :) До речі: Ви також можете використовувати padding-right: 0;замість цього padding-right: 0pxдля максимальної ефективності
— janisch
2

У моєму випадку тег body вже вказує overflow:hidden.

Коли модальне діалогове вікно відкривається, воно також додається padding-right:17px;до тіла.

Мій код тут

.modal-open {
  overflow: hidden!important;
  padding-right:0!important
}
— KayJ
джерело
1

На моїй сторінці потрібна була модифікована версія коду Агні Прадхарми, щоб вона не зміщувалась, коли модаль був показаний. У мене є фіксований заголовок навігації та деякі сторінки зі прокруткою, деякі без. Демо тут: http://jsbin.com/gekenakoki/1/

Я використовував обидва css:

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

і сценарій:

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth();
    if (scrollbarWidth) {
        $(document.body).css('padding-left', scrollbarWidth); 
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-left', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};
— лицар
джерело
це не працює. змініть скрипку, щоб запустити вертикальну прокрутку, і зсув все одно з'явиться.
— Архімед Траяно,
1

Починаючи з Bootstrap 3.3.2, виглядає так, що смуги прокрутки видаляються, коли відображається діалогове вікно, і Bootstrap додає деяку праву відступ до елемента тіла, щоб компенсувати простір, зайнятий раніше смугою прокрутки. На жаль, це не заважає зрушити екран, принаймні в сучасних версіях Chrome, IE, Firefox або Safari. Жодне з виправлень тут повністю не вирішує цю проблему, але поєднання відповідей від ben.kaminski та частини відповіді від cjd82187 вирішує проблему лише з CSS:

/* removes inline padding added by Boostrap that makes the screen shift left */
.modal-open[style] {
    padding-right: 0px !important;
}

/* keeps Bootstrap from removing the scrollbar if it's there */
.modal-open {
    overflow: auto;
}

Як згадував ben.kaminski, код був доданий до Twitter Bootstrap, щоб ви могли прокручувати, щоб показати модаль, якщо він знаходиться за нижньою частиною екрана. Щоб зберегти цю функціональність, ви можете обернути рішення CSS у медіа-запиті, щоб воно стосувалося лише великих вікон перегляду, приблизно так:

@media (min-width: 992px) {         
    .modal-open[style] {
        padding-right: 0px !important;
    }

    .modal-open {
        overflow: auto;
    }   
}
— клав
джерело
1

Для Bootstrap-4.3.x використовуйте такий css:

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

/* if you have .navbar in your page then add padding-right for your .navbar (default is 16px) */
.modal-open .navbar {
    padding-right: 16px !important;
}

Це воно. Нічого іншого не потрібно, як: код JavaScript, щоб додати його .classдо вашогоbody а потім додати коди CSS для їх стилізації.

— Парфо63
джерело
1

Коли відкривається модальний файл bootstrap, тоді для класу .modal-open встановлюється тег body. У цьому тегу встановлено переповнення: прихований. ми повинні це змінити. Додайте наведений нижче код у свій CSS.

<style>
body.modal-open {
    overflow: visible !important;
}
</style>

Довідково: - Як виправити Bootstrap модальний фоновий прокрутка до початку

— Шарма Судханшу
джерело
0

якщо хтось випадково використовує react-bootstrapрішення, це просто трохи складніше, оскільки react-bootstrapзастосовує вбудовані стилі до bodyелемента для маніпулювання стилями overflowта padding. Це означає, що ви повинні замінити ці вбудовані стилі!important

body.modal-open {
  // enable below if you want to additionally allow scrolling with the modal displayed
  // overflow: auto !important;

  // prevent the additional padding from being applied
  padding: 0 !important;
}

ПРИМІТКА : якщо ви не ввімкнули прокрутку (тобто зробили смугу прокрутки видимою), прокоментувавшиoverflowстиль, то вміст вашої сторінки, здається, зміститься на ширину смуги прокрутки (якщо смуга прокрутки була раніше видно, тобто).

— pjs
джерело
0

Моє рішення Jquery:

var nb = $('nav.navbar-fixed-top');
$('.modal')
    .on('show.bs.modal', function () {
        nb.width(nb.width());
    })
    .on('hidden.bs.modal', function () {
        nb.width(nb.width('auto'));
    });
— Головейчук
джерело
0

Для Bootstrap версії 3.2.0 ці рядки у файлі css file fill виправляють помилку:

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

Рішення знайдено тут

— Тео Орфанос
джерело
0

Найкращим рішенням для мене було використання цих налаштувань. Це працює для Інтернету та мобільних пристроїв

.modal-open {
   overflow: hidden;
   position: absolute;
   width: 100%;
   height: 100%;
}
— Бартандо
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.