Как получить разделенную вертикальную прокрутку экрана для углового приложения? - PullRequest
Новая
       37

Как получить разделенную вертикальную прокрутку экрана для углового приложения?

0 голосов
/ 25 января 2019

У меня есть страница, левая половина - панель с миниатюрами, а правая половина - карта.Моя проблема в том, что когда я получаю больше записей, панель инструментов увеличивается, и прокручивается вся страница, а не только панель инструментов.Я хочу, чтобы он работал как страница бронирования Airbnb, параллельная прокрутка рядом.Я попытался использовать переполнение в CSS, но почему-то все равно не работает.

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

<div class="container-fluid">
  <div class="row">
    <app-artwork-dashboard class="col-lg-5 mt-3 scroll" #list (add)="input.startAddingArtwork()" (edit)="input.startEditingArtwork($event)">    </app-artwork-dashboard>
    <app-open-street-map class="col-lg-7 map-shadow"></app-open-street-map>
  </div>
</div>

и вот css: 

.scroll {
  overflow-x: scroll;
  overflow-y: scroll;
}

на приборной панели У меня есть класс прокрутки, который технически должен сделать эту сторону страницы прокручиваемой, по крайней мере, я так думал!

1 Ответ

0 голосов
/ 25 января 2019

Попробуйте это в вашем случае: 

.container{max-width:50%;  width:50%; float:left; height:100vh; overflow-x: scroll;overflow-y: scroll; overflow:scroll;}

<div class="container"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="container"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Или вы можете использовать flex, чтобы обернуть div, чтобы установить их рядом, и поле стиля, как показано ниже: 

.wrap{display:flex;}
.box{
height: 100vh;
    width: 50vw;
    overflow: scroll;
}

<div class="wrap">
  <div class="box">

  </div>
  <div class="box">

  </div>
</div>

Другое решение со встроенным блоком: 

.box{
  display:inline-block;
  height: 100vh;
   width: 49%;
    overflow: scroll;
}

<div class="box">
</div>
<div class="box">
</div>
...