如何将两个div以角度8垂直滚动在一起

Question

我有两个高度相同的div。它们一个接一个地水平放置在父div中。

<div class="parent">
<div class="div1">
<div *ngFor="let item of list;" style="height: 30px;">{{item.id}}</div>
</div>
<div class="div2">
<div *ngFor="let item of list;" style="height: 30px;">{{item.value}}</div>
</div>
</div>

样式像这个

.div1{
height: 300px;
overflow-y: auto;
width: 100px;
float: left;
}
.div2{
height: 300px;
overflow-y: auto;
width: 500px;
float: left;
}

ts文件具有设置list阵列中的数据的功能

list = [];
setData() {
for (let i = 0; i< 300; i ++) {
this.list.push({id: i, value: `value is: ${i}`});
}
}

现在我想要的是，当我在一个div(类名div1或div2(内垂直滚动时，另一个div也应该以同样的方式滚动。有什么建议吗？

UPDATE：div2也应该是水平滚动的。

Answer 1

您可以向父级添加一个固定的height和overflow: scroll，以将它们一起滚动

.parent {
overflow: scroll;
background: aliceblue;
display: flex;
height: 200px;
}
.div1 {
width: 100px;
}
.div2 {
width: 500px;
}

<div class="parent">
<div class="div1">
<h4>Div1</h4>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
</div>
<div class="div2">
<h4>Div2</h4>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
<div class="item">123</div>
</div>
</div>