Виртуализация пользовательского интерфейса Aurelia с помощью div-блоков flex box (пять столбцов)

Question

У меня есть приложение Aurelia, где я хочу иметь бесконечную прокрутку в одной части приложения на приборной панели. Итак, моя область прокрутки находится только на одной части экрана. У меня есть его прокрутка, но прокрутка прерывистая каждые три или четыре строки, и я пытаюсь выяснить, как настроить плагин виртуализации пользовательского интерфейса или использовать его, чтобы не иметь рывковую прокрутку.

Я попытался сделать контейнер больше и меньше. Я не пытался сделать это столом. Я использую flex-box для элементов в бесконечной прокрутке, и у меня есть пять элементов вместо одного, такого как демонстрационное приложение, в столбцах внутри повторяемого элемента div, например:

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