How to scroll two ag-grid synchronized?

Question

i have 2 ag-grids in angular 5 and i need when i scroll one of the grid also need to scroll the other ag-grid to the same index, both ag-grid has the same number of elements because every element has a pair in the other grid

i try to use the methods here https://github.com/ag-grid/ag-grid/issues/907 but dotn work

Answer 1

Besides the naive programmatic solution of writing some javascript code, which listens to the corresponding scroll events and applying them to the other containers accordingly, i would probably recommend simply restructuring your html in this specific case. if you put both of your lists inside of one container, which is scrolling - instead of scrolling both containers - you would achieve what you are asking for.

so, just put both lists inside one div with the according css, like

overflow-y: auto;

Answer 2

Not sure the put the 2 grids in a unique component is applicable. Indeed ag-grid has a sort of virtual scroll, for example, it does not scroll header or columns but only the table content. So far I could get the scroll position with AG grid API, and found a function to scroll according to a visibility of a row constraint, but not found yet any ag-grid function just scroll by pixel. Possibility we need to use low level DOM API for that ?