Handsontable でスクロールをしたときにグリッドの崩れを回避したい

Handsontable

たくさんの行、列が存在するグリッドはスクロール操作をした時に崩れることがあります。
この原因は、Handsontable ではなく、
そもそも、HTMLの表示をブラウザでは、DOM + CSS → CSSOM というCSSOM を作るわけですが、
このCSSOM を作る間、ブラウザがレンダリングをするのを止まってしまいます。
スクロール操作ではこれが遅延するものと追いつくものの差が出てきて崩れを生じます。

完全に解決する方法はないですが、回避できる可能性がある Handsontable のオプションがあります。

https://handsontable.com/docs/api/options/#viewportcolumnrenderingoffset

https://handsontable.com/docs/api/options/#viewportrowrenderingoffset

viewportColumnRenderingOffset と、viewportRowRenderingOffset　
グリッド周囲を描画する時の行と列の数、これがデフォルトでは、auto ：自動計算される値になってます。
これを、表示するグリッドの状況に合わせて、数値で指定します。

viewportColumnRenderingOffset: 100,
viewportRowRenderingOffset: 100,

Handsontableをセットする書き方、以下のようにこのオプションを書きます。

var hot = new Handsontable(document.getElementById("table"), {
        data: data,
        language: 'ja-JP',
        columns: // 列定義がある。
        autoColumnSize: true,
        autoRowSize: true,
        viewportColumnRenderingOffset: 100,
        viewportRowRenderingOffset: 100,

});