Невозможно нажать на вертикальную полосу прокрутки браузера из-за полноэкранного режима bootstrap - PullRequest
Новая
       5

Невозможно нажать на вертикальную полосу прокрутки браузера из-за полноэкранного режима bootstrap

3 голосов
/ 17 марта 2020

Я использую Bootstrap 4 в своем проекте и изменил модальный стиль, чтобы сделать его полноэкранным, как вы можете видеть на этом css коде: 

.modal.show  {
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-content:center;
  align-items: flex-start;
}

.modal-body {
  padding: 0;
  margin: 0;
}

.close {
  color: #aaa;
  position: absolute;
  /* background: blue !important; */
  border: 0;
  top: 0;
  z-index: 99999;
  right: 3%;
  float: none;
  opacity: 1;
  font-size: 40px;
  font-weight: 400;
}

.modal-backdrop.modal-backdrop-transparent {
  background: #ffffff;
}

.modal-backdrop.modal-backdrop-transparent.in {
  opacity: .9;
  filter: alpha(opacity=90);
}

.modal-backdrop.modal-backdrop-fullscreen {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: .97;
  filter: alpha(opacity=97);
}

.modal-fullscreen {
  background: #fff;
    min-width: 100%;
    margin: 0;
}

@media (min-width: 768px) {
  .modal-fullscreen .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .modal-fullscreen .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .modal-fullscreen .modal-dialog {
    width: 100%;
  }
}

.modal-dialog {
  position:fixed;
  padding: 0;
  max-width: 100%;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow:auto;
}

Когда я пытался прокрутите вниз вертикальную полосу прокрутки браузера, это не так! Я могу использовать колесо прокрутки мыши, но не нажимая на него напрямую!

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

Здесь jsfiddle, чтобы увидеть демонстрацию проблемы в реальном времени: https://jsfiddle.net/odbjcpt2/1/

Надеюсь Я не хочу использовать положение FLEX вместо FIXED, так как это не решит проблему в моем проекте, даже если в приведенном примере это будет работать (модально продолжайте добавлять padding-right to body ... это исправлено с помощью FIXED).

Спасибо

1 Ответ

1 голос
/ 17 марта 2020

В вашем JSFiddle проблема, похоже, связана с div, который содержит текст Lorem Ipsum. У него pointer-events: auto; унаследовано от класса .modal-content, и если вы удалите его, то получится pointer-events: none;, унаследованный от класса модального диалога. Если вы уберете их обоих, проблема исчезнет.

РЕДАКТИРОВАТЬ

Я считаю, что проблема root заключается в том, что вы устанавливаете класс .modal-dialog на фиксированную позицию и автоматическое переполнение.

Ниже от bootstrap do c

Модалы используют положение: исправлено, что иногда может быть немного специфичным в отношении его рендеринга. Когда бы ни было возможно, поместите ваш модальный HTML в положение верхнего уровня, чтобы избежать потенциальных помех от других элементов. Скорее всего, у вас возникнут проблемы при вложении .modal в другой фиксированный элемент.

После игры, если я отредактирую ваш CSS в вашем примере JSFiddle и в классе .modal-dialog I просто удалите position:fixed; и overflow:auto;, проблема исчезнет.

ВНОВЬ РЕДАКТИРОВАТЬ

Я только что заметил, что в вашем * 1031 определено диалоговое окно .modal. * дважды, первый раз с гибким положением и второй раз с фиксированным. Похоже, это была ошибка копирования / вставки. В любом случае, все тот же root, потому что я думаю, потому что ваш div .modal-dialog фиксирован и находится внутри вашего .modal div, а bootstrap do c говорит, что не помещайте другое фиксированное внутри .modal

...