为什么滚动来回跳跃？

Question

按下键时，我希望容器每次滚动210像素（行的大小）。然而，它滚动了一些奇怪的方式：218,210,428,420等。

以下是我滚动到下一个元素的方法：

$(".container").animate({scrollTop: $("#row" + currentRowIndex).offset().top});

以下是一些相关的CSS：

.container {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 0;
    height: 90vh;
}

.row {
    white-space: nowrap;
    overflow-x: hidden;
    font-size: 0;
    background-color: cyan;
}

https://jsfiddle.net/souren/avLyhjw2/

问题：如何修改滚动，以便每次滚动一行，仍然使用＆＃34;滚动到＃ID＆＃34;机制？