fix resize-scroll when grid is not at top of page

[Manfred-on-github]

Description

when scroll element does not start from top of page, the scrolling during resize does not work as expected, the decision if to scroll, and amount to scroll, is computed wrong.
This PR fixes this.

Checklist

• Created tests which fail without the change (if possible)
• All tests passing (yarn test)
• Extended the README / documentation, if necessary

[adumesny]

@Manfred-on-github did you test with latest 4.2.0 as I made some changes to scrollbar during dropover (fix #1704) which may or may not be related... would be great to have an example showing the issue before.

thanks for doing this fix!

[Manfred-on-github]

have added a test page. Have checked error can be reproduced in 4.2.0, 4.0.3 and 3.3.0.

[adumesny]

thanks, that is perfect.

[adumesny]

funny you called it 'gridster' :) did you used that lib before ??

[Manfred-on-github]

oh - yes, we used that originally, then, looking for something that is still maintained, we found gridstack. - Thank you for keeping this up.

[adumesny]

while this fixes the offset issue of the grid, still doesn't work perfectly as it scroll too soon... why does it scroll when we hit the white sidebar and not the actual end of the yellow grid ?

[Manfred-on-github]

for me it scrolls when the y-position of the pointer moves outside the range indicated by the white sidebar.

This seems to be by design, as the function updateScrollResize() is invoked from gridstack-dd.ts with parameter distance as cellHeight, therefore (to visually show this in my sample) have explicitly set grid rowHeight to 130px, which is also used as border height in the sidebar.

Of course this might be changed to some smaller value. For me it is also ok as it is now, as widgets further down will appear in view early before the resize just pushes them down, so user better sees what resizing of a particular widget will mean to positions of other widgets.

Something that would rather improve user experience, is connected to the comment in that function about using a timer. As it is now, when pointer gets near the edge, this function scrolls the page, but then the pointer is still near the edge, so condition to scroll still holds, and the next scroll happens immediately, and so on. So something that limits these scroll events would definitely help here.

[adumesny]

yes about timer, and what #1576 is about (at least the speed part which I agree and needs to get done).

| For me it is also ok as it is now, as widgets further down will appear in view early before the resize just pushes them down, so user better sees what resizing of a particular widget will mean to positions of other widgets.

I can see that, but it's odd if you don't have widgets directly below to see what will happen on next block jump. Otherwise it's odd to scroll before you reach the edge.

[adumesny]

@Manfred-on-github looks like your change caused #1745 issue. I forced offsetTop = 0 (revert your change) and back to working as expected...