Запретить div, чтобы не перекрывать полосу прокрутки на родительском div

0

Контекст: я пытаюсь решить проблему как упоминание здесь: https://github.com/likeastore/ngDialog/issues/94

Проблема: Откройте plnkr: http://plnkr.co/edit/qKJiNwyivqJVCAtyhwYR?p=preview и попробуйте удерживать и перетаскивать полосу прокрутки с помощью мыши. Полоса прокрутки в родительском контейнере не может использоваться с помощью мыши. Кстати, происходит то, что позиция: фиксированный div.overlay перекрывается с полосой прокрутки его родительского контейнера.

HTML:

<div class="container">
  <div class="overlay"></div>
  <div class="content">
    <div>I'm large 1</div>
    <div>I'm large</div>
    <div>I'm large</div>
    <div>I'm large</div>
    <div>I'm large</div>
  </div>
</div>

CSS

.container{
    position: fixed;
    overflow: auto;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;  
    padding: 160px;
}

.container .overlay{
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.container .content{
    background: #f0f0f0;
    border-radius: 5px;
    max-width: 100%;
    position: relative;
}
Теги:
angularjs-directive
ng-dialog

1 ответ

0

Я думаю, вы должны изменить HTML, чтобы быть

<div class="overlay"></div>
<div class="container">
  <div class="content">
  </div>
</div>
</div>

Не забудьте изменить css. http://plnkr.co/edit/QsQBk5oJfWuCymBwUtYB?p=preview

  • 0
    Спасибо ZyXEL. Это хорошая идея, но мне нужно сделать это с помощью CSS, если это возможно.
  • 0
    http://stackoverflow.com/questions/25639774/fixed-div-overlaps-scrollbar-of-static-div . Я думаю, что этот вопрос похож на ваш. Похоже, что это не может быть сделано с использованием только CSS.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню