Skip to content

[css-overflow-4] Allow scrollable overflow to be clipped in off-axis #12289

Open
@flackr

Description

@flackr

When developers create scrolling containers that are only intended to scroll in one direction, they'll sometimes have content which slightly overflow in the other axis. Per the css-overflow-3 spec:

The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip.

This seems to mean that even if you set the off axis overflow to clip it will still compute to hidden. While this is not a problem for user scrolling, overflow: hidden is still programmatically scrollable. Calls to scrollIntoView or anchor link scrolls can accidentally vertically scroll to your overflowing content. Worse yet, a user has no way to undo this after it happens.

This originally came up as a scroll-marker bug crbug.com/422733086 (Demo), however this problem can easily occur with existing content. E.g. consider this demo with "accidental" vertical scrolling when clicking on an item to scroll it into view: https://jsbin.com/voxohip/edit?html,css,js,output

Proposal: We should allow overflow clip in the off axis to make that axis not scrollable. E.g. overflow: auto clip; should allow creating a scroll container which cannot be scrolled vertically.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions