[scroll area] Make it possible to recreate the macOS overlay scrollbar behaviour

[vladmoroz]

I've tried to recreate how the macOS overlay scrollbar works, but couldn't.

Mainly, it's shown when scrolling, and once shown, it persists if the cursor is placed over the scrollbar itself in time before it hides—we don't have a style hook for this, nor it seems to be possible with CSS

Search keywords:

[atomiks]

we don't have a style hook for this, nor it seems to be possible with CSS

The original demo on components/react-scroll-area does this though? It uses :hover on the Scrollbar part itself to persist it.

  &[data-hovering],
  &[data-scrolling],
  &:hover {
    visibility: visible;
    opacity: 1;
  }

  &[data-scrolling]:not(:hover) {
    transition: none;
  }

[vladmoroz]

@atomiks I still couldn't figure out how to be able to re-hover a scrollbar after hovering it and then unhovering it. macOS provides a grace period for that

One more detail is that the native overlay scrollbars show only for the direction that is being scrolled—I think this one is more important

[atomiks]

@vladmoroz I notice in the linked PR there's a grace period, can transition-delay be used?

One more detail is that the native overlay scrollbars show only for the direction that is being scrolled—I think this one is more important

This makes sense

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.