LibWeb: scrolling is being captured by containers with overflow: auto

[xNaCly]

Reproducing the issue:

1. Navigate to https://xnacly.me/posts/2024/faster-inserts/
2. Attempt to scroll the page
3. The first container with a scrolling overview stops the page scroll and is being captured in the container scroll.

Expected Behaviour:

The container should capture the scroll up until it finishes scrolling the content, afterward the page scroll should continue, with ladybird it stops.

[SamuelScheit]

Can replicate

https://github.com/LadybirdWebBrowser/ladybird/assets/34555296/2619e573-d0b9-4650-8a33-424a2de0ec5c

[galyfray]

I tested the same page in Firefox (129.0), and Chromium (127.0.6533.88). The way it is handled seems more complex than I initially thought.

I will list theirs comportment from a user perspective. F : Firefox; C: Chromium; L: Ladybird

• When the vertical scroll bar is not shown
  • F;C;L : The element is ignored in the scroll.
• When the scroll bar is shown :
  • When scrolling [Cursor outside the component when scrolls start]
  • F;C : The element is ignored in the scroll.
  • L : the scroll is caught by the element.
  • When scrolling [Cursor outside the inside when scrolls start]
  • F : The element is ignored in the scroll.
  • C;L : the scroll is caught by the element.
  • When scrolling [After clicking on the element or waiting about 1-2s with cursor on it]
  • F;C;L : the scroll is caught by the element.

I did not find any sort of standard about how scroll should be handled in such cases (thought I am a newcomer here, and it is quite possible I missed the document)

It seems like there is a place for interpretation and user experience in this particular problem.

I will try to implement Chromium's behavior since it seems to be the simplest.

[AtkinsSJ]

The term for this is "scroll chaining". That spec defines new CSS properties for controlling how this works, which might be worth looking into when implementing this.