w3c / w3c/csswg-drafts

[css-om-view] How does scrolling relate to mouseWheel event propagation?

Open
#4,680 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

cssom-view-1
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

https://drafts.csswg.org/cssom-view/#scrolling

We don't have interop on how mouse wheel events behave in nested, abspos scrollers:

Testcase: https://codepen.io/smfr/pen/rQZqxo

In Gecko, mousewheeling over a child scrollable element will propagate the events to any DOM ancestor that is scrollable, and, if the child is scrolled to the start/end, will trigger scrolls in that ancestor. This is the behavior you would expect from normal DOM event propagation, but doesn't necessarily match user expectation (you can end up scrolling something not under the pointer).

In WebKit/Blink, scrolls don't propagate to an ancestor if the child is absolutely positioned, even if the pointer is in a location that intersects both descendant and ancestor scroller.

No browser seems to propagate scrolls from an abspos, non-scrollable element to its scrollable DOM-ancestors (which doesn't seem to match normal DOM event propagation rules).

In addition, there are some differences in whether events inside an element, but outside its padding box (i.e. outside the scrollable part) trigger scrolling.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the CSSOM View scrolling section and the linked CodePen testcase. Compare the Gecko, WebKit, and Blink behavior described for nested and absolutely positioned scrollers, then determine the agreed scrolling and event-propagation rules; done would require an agreed specification change, but no target file is identified.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.