ダッシュボード アプリケーションの一部で無限にスクロールしたい Aurelia アプリがあります。そのため、私のスクロール領域は画面の一部だけです。スクロールしていますが、スクロールは3行または4行ごとにぎくしゃくしています.UI仮想化プラグインを調整する方法、またはスクロールがぎくしゃくしないように使用する方法を見つけようとしています。
コンテナを大きくしたり小さくしたりしてみました。テーブルにしてみませんでした。無限スクロールのアイテムにフレックスボックスを使用しています。デモ アプリケーションのような 1 つではなく、次のように繰り返し可能な div 内に 5 つのアイテムがあります。
<div class="" style="overflow: scroll;
height: 1000px">
<div class=" " virtual-repeat.for="row of rows"
style="display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
height:300px;">
<div class="card" style="height:300px;">
<img src.bind="row.item1.image" ref="image" />
<div class="card-section">
<h3>First column</h3>
</div>
</div>
<div class="card" style="height:300px;">
<img src.bind="row.item2.image" ref="image" />
<div class="card-section">
<h3>second column</h3>
</div>
</div>
<div class="card" style="height:300px;">
<img src.bind="row.item3.image" ref="image" />
<div class="card-section">
<h3>third column</h3>
</div>
</div>
<div class="card" style="height:300px;">
<img src.bind="row.item4.image" ref="image" />
<div class="card-section">
<p>4th column</p>
</div>
</div>
<div class="card" style="height:300px;">
<img src.bind="row.item5.image" ref="image" />
<div class="card-section">
<p>5th column</p>
</div>
</div>
</div>
</div>