如何为 angular 应用程序实现分屏垂直滚动？

Question

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

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

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

内联块的另一种解决方案：

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

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

如何为 angular 应用程序实现分屏垂直滚动？

How to get split screen vertical scrolling for angular app?

vertical-scrolling

angular-template

split-screen

angular