[scroll area] Need a styling attribute to check for overflow presence

[vladmoroz]

Feature request

I attempted styling ScrollArea with a hard scrollbar and ended up with a selector that looked like this:

  .ScrollAreaViewport {
    height: 100%;

    &:has(+ .ScrollAreaScrollbar[data-orientation='horizontal']) {
      padding-bottom: 1.5rem;
    }
}

I think we need data attributes both on Root and Viewport to target this comfortably.

Naming ideas:

• data-has-overflow-x / data-has-overflow-y
• data-has-vertical-scrollbar / data-has-horizontal-scrollbar

[atomiks]

Although it should be added for consistency, I'm assuming to replicate scrollbar-gutter stability, you typically don't need one for the vertical scrollbar?

[vladmoroz]

@atomiks this wasn't really to replicate scrollbar-gutter — I wanted to make space for the scrollbar only when it's there. Kind of how normal hard scrollbars work without scrollbar-gutter

I think you need this for the vertical scrollbar too

[vladmoroz]

Perhaps we just shouldn't add position absolute scrollbars as well, so you can achieve it with layout naturally? (Either way I'd add those attributes)

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@2478