如何获得角度应用程序的分屏垂直滚动？答案

【问题标题】：How to get split screen vertical scrolling for angular app?如何获得角度应用程序的分屏垂直滚动？
【发布时间】：2019-01-25 10:11:07
【问题描述】：

我有一个页面，左半部分是带有缩略图的仪表板，右半部分是地图。我的问题是，随着我获得更多条目，仪表板会增加并且整个页面滚动，而不仅仅是仪表板。我希望它像 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;
}

在仪表板上我有一个滚动类，从技术上讲，它应该使页面的那一侧可以滚动，至少我是这么认为的！

【问题讨论】：

标签： angular vertical-scrolling angular-template split-screen

【解决方案1】：

在你的情况下试试这个：

.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>

使用 inline-block 的另一种解决方案：

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

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

【讨论】：