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


78

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

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

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


Очевидно, ця проблема була виправлена ​​у версії 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;
}

4
Працювало у мене, але мені довелося змінити право на поле на відступ
GhostRider

@GhostRider: Дякую. Мені довелося випадково запобігти запас.
Брайан Кейтс

Плюс одна для фіксованого верхнього / фіксованого нижнього, жодна з інших відповідей не працювала для цього сценарію.
Тіно Макларен

1
Відповідь @FutureReaders ben.kaminski , нижче, містить однорядкове рішення css, яке має бути прийнятою відповіддю.
cssyphus

92
.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

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

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


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");
});

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


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


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

2

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

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

Мій код тут

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

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 для їх стилізації.


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стиль, то вміст вашої сторінки, здається, зміститься на ширину смуги прокрутки (якщо смуга прокрутки була раніше видно, тобто).


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.