Proposal for a user interaction :drag pseudo-class

[kennethzuniga]

I’d like to propose the addition of a new pseudo-class, :drag, that would enable developers to apply styles when an element is being actively dragged by the user. Currently, CSS lacks a mechanism to detect drag interactions, making it difficult to manage UI behaviors that depend on this action without relying on JavaScript.

Problem:
For example, when creating a horizontally scrollable menu or container, it’s common to want to display overflow content only when the user is actively dragging the element, such as to prevent unwanted overflow visibility when the user is not interacting with the container. Without a drag-based pseudo-class, this behavior must be managed entirely via JavaScript, which introduces extra complexity and reduces CSS’s potential as a powerful, declarative styling tool.

Proposed Solution:
A :drag pseudo-class would be triggered when an element is being dragged by the user, allowing developers to apply styles related to dragging (such as changing overflow properties) directly in CSS. This would reduce the need for JavaScript and create a more streamlined and accessible experience.

Example

.menu-bar:drag {
  overflow-x: auto; /* Enable horizontal scrolling while dragging */
}

Benefits

• Enables a declarative, CSS-only solution for managing drag-based interactions.
• Reduces reliance on JavaScript for managing overflow and other drag-dependent behaviors.
• Improves accessibility by providing a native CSS solution.

[flackr]

when an element is being actively dragged by the user

Currently, we have a concept of draggable elements, that this doesn't seem to be related to: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API. For this use case it sounds like dragging is synonymous with scrolling?

For example, when creating a horizontally scrollable menu or container, it’s common to want to display overflow content only when the user is actively dragging the element

We determine which scroller to target when the user starts trying to scroll. If you update the overflow after this, you won't be able to change what is being scrolled.

I also worry that this is going to create inaccessible content, e.g. can keyboard users not scroll the content?

Since this seems to be about scrolling, are you proposing that dragging means finger movements or touchpads or wheel events?

Is the core problem that you want to have overlay style scrollbars that are not visible until scrolling?