Полоса прокрутки отключена при открытии модального окна Bootstrap.

Я делаю полосу прокрутки страницы всегда видимой, используя следующий код:

html {
    overflow-y: scroll; 
}

Однако при открытии модального окна Bootstrap основная полоса прокрутки недоступна (видна, но отключена), и при попытке ввести некоторый код, показанный ниже, не решает проблему.

.modal-open {    
    overflow-y: scroll !important; 
}

Что хочу попробовать следующие подходы:

1) Я хочу, чтобы основная полоса прокрутки была включена, даже если модальный режим открыт

2) Я хочу, чтобы полоса прокрутки модального окна была видна автоматически, но когда я использую overflow-y: scroll; высота модального тела не может быть увеличена автоматически, и полоса прокрутки модального содержимого кажется отключенной (когда я устанавливаю высоту, полоса прокрутки включена, но я хочу использовать автоматическую высоту). Любая идея?


html css scrollbar twitter-bootstrap twitter-bootstrap-3
person Jack    schedule 01.10.2016    source источник
comment
Пожалуйста, вставьте код.   -  person Narek-T    schedule 01.10.2016

Ответы (1)


arrow_upward
3
arrow_downward

Попробуйте изменить эту строку:

.modal-open {    
   overflow-y: scroll !important; 
}

to:

body.modal-open {
  overflow: scroll; !important;
}

Фрагмент:

body.modal-open {
  overflow: scroll; !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal
</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                This is the modal
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div style="height: 1600px;"></div>

person gaetanoM    schedule 01.10.2016
comment
У меня была такая же проблема, но, к сожалению, мне этот подход не помогает. См. itc-ms.de. Когда модальное диалоговое окно открывается, основная страница по-прежнему перемещается, так как основная полоса прокрутки исчезает. - person MichaSchumann; 20.05.2017
comment
@MichaSchumann Как только я добавил стиль body.modal-open {overflow: scroll; ! important;} в вашем заголовке он работал нормально. Дай мне знать - person gaetanoM; 20.05.2017
comment
2021 и все еще возился с BS3 (вздох ...). В любом случае, если вы этого не заметили, в этом примере есть опечатка - должно быть: body.modal-open {overflow-y: scroll! Important; } (Без точки с запятой после прокрутки) - person AndyP9; 24.07.2021
comment
Извините за ошибку. Виноват. В любом случае, можете ли вы добавить скрипку для создания доказательства? Спасибо - person gaetanoM; 24.07.2021