[grid] Scrollbar jumps to start after resizing column beyond viewport

[web-padawan]

Description

Originally reported at #3566 (comment) but seems not specific to that feature.

This issue can be observed with a grid that has resizable column:

<script type="module">
  import '@vaadin/grid/all-imports';
  import { users } from '@vaadin/grid/test/visual/users.js';

  const grid = document.querySelector('vaadin-grid');
  grid.items = users;
</script>

<vaadin-grid style="max-width: 600px">
  <vaadin-grid-column-group header="name">
    <vaadin-grid-column path="name.first" width="120px" flex-shrink="0"></vaadin-grid-column>
    <vaadin-grid-column path="name.title"></vaadin-grid-column>
  </vaadin-grid-column-group>
  <vaadin-grid-column path="location.city" width="200px" resizable flex-shrink="0"></vaadin-grid-column>
  <vaadin-grid-column path="location.state" width="200px" resizable flex-shrink="0"></vaadin-grid-column>
  <vaadin-grid-column path="location.zip" resizable></vaadin-grid-column>
</vaadin-grid>

1. Resize the "State" column several times to make it wide enough
2. Scroll using touchpad so that left edge of "State" column gets out of the viewport
3. Click the horizontal scrollbar after scrolling the grid the last time

grid-resize-scroll.mp4

Expected outcome

Scrollbar remains where it is.

Actual outcome

Scrollbar jumps to the beginning (first column).

Environment

• Vaadin 23

Browsers affected

• Chrome
• Firefox
• Safari