Auto scroll left to right based on mouse selection

Question

I have a angular directive which allows me to select the content of the table cells. Its working fine as expected.

But When I try to select multiple cells in one go scrollbar is not moving so I am not able to select the cells.

Stackblitz Demo

As you can see in below image I am selecting the cells but scrollbar is not moving to bottom or right. Its Not allowing me to select all the desired cells. (cells with green background are selected cells)

Update: More clarity about the issue

I can select multiple cells. But scrollbar is not moving right or bottom while selecting multiple cells. So not able to select the cells which are not visible in the view. I am able to select the cells which are visible in the current view

Answer 1

By using MouseEvent#clientX , Element.clientWidth and Element#scrollLeft or Element#scrollTo you can do the trick. See the StackBlitz