Skip to content

Improvements to scrolling containers #2585

@dlnr

Description

@dlnr

While working with the Tabs and Table components i've noticed it would help to add these rules:

overflow: auto hidden;
overscroll-behavior-x: contain;

overflow Shorthand to make sure overflow-y is set to hidden and nog auto to prevent the accidental popping up of scrollbars.
overscroll-behavior-x to disable to back navigation on touch screens and prevent the scroll chaining to the body.

There is much more we could do to containers that scroll like scrollbar-behavior or styling them with scrollbar-color, scrollbar-gutter and scrollbar-width to prevent the ugly windows fixed scrollbars. (Edit: never mind the baseline settings would not allow this)

Another welcome addition to Tabs would be if the selected Tab would scroll in view using something like scroll-snap-align: start; because on a small screen, if the active tab is outside the viewport, the tab would not be visible forcing you to place another title to show the user where they are.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions