Как я могу предотвратить появление полосы прокрутки поверх модального фона? - PullRequest
Новая
       39

Как я могу предотвратить появление полосы прокрутки поверх модального фона?

0 голосов
/ 30 июня 2018

Я помещаю модальную фиксированную позицию внутри относительно позиционированного элемента без преобразований и с переполнением: auto.

Проблема в том, что при переполнении родительского элемента фон модального экрана не покрывает полосы прокрутки - пожалуйста, посмотрите на картинку, прикрепленную для примера.

enter image description here

Полоса прокрутки также должна быть покрыта полупрозрачным черным фоном, но по какой-то причине это не так. Кто-нибудь знает, почему и / или как я могу исправить это?

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

Вот мой css для класса .modal-container, который включает фон. 

.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 1;
transition: all .1s;
display: flex;
z-index: 200;
justify-content: center;
align-items: center;}

1 Ответ

0 голосов
/ 30 июня 2018

Попробуйте это 

.modal-container {
  overflow-y: auto;
}

или 

    html {
      overflow: scroll;
      overflow-x: hidden;
    }
    ::-webkit-scrollbar {
      width: 0px;  /* remove scrollbar space */
      background: transparent;  /* optional: just make scrollbar invisible */
    }
    /* optional: show position indicator in red */
    ::-webkit-scrollbar-thumb {
      background: #FF0000;
    }
...