Scrolling elements into view causes unintended and irreversible scrolling in some cases

[Inwerpsel]

In various circumstances the browser scrolls normally unscrollable elements within their parent when using scrollIntoView.

This can disfigure the page and can only be solved by switching to a sufficiently different other screen size, and back. Sometimes even that is not possible and a page refresh is needed.

Detailed example

It happens to some elements that are overflowing their parent but have this overflow hidden and no scroll bar. On the Open Props example, open the selectors of the title, which should trigger scrollIntoView, breaking the layout as can be seen below.

Before:

After

This glitch can only reliably be undone by reloading the page, or in some way cause the element to disappear and reappear, which is usually not possible. Sometimes focusing one of the parents does restore the original position, but could also make it worse.

Only observed in Chromium, but it might also happen in other browsers. Not sure if it can be fixed per se, but probably more can be done to avoid it.

Similar, perhaps related issue

Sometimes focusing a fixed element will still make the whole page scroll, even though 1. the element is already in view, and 2. it's fixed so scrolling doesn't make sense in the first place.

My current guess is a small part of the edge of the fixed element is off screen, or covered by the scroll bar. This also happens on the Open Props example.

Usages: https://github.com/Inwerpsel/use-theme-editor/search?q=scrollintoview

[Inwerpsel]

This could be mitigated, while also offering additional functionality, by expanding the "scroll in view" buttons to allow scrolling to top, bottom, left and right (probably also corners).

This can be done by holding and dragging the button into the direction of the intended edge to focus.

On drag start, create absolutely positioned "drop" zones around the button, which then on drag hover scroll the right part into view. Actually dropping the element onto such zone doesn't need to do anything.

Alternatively, it could determine the angle, once you leave the button, and on mouse move, and scroll the corresponding point of the edge of the element into view. This would give the same result as the 8 individual options provided by the "drop zone alternative", but smoothly transition between them.