Skip to content

[css-transitions] smoothly transitioning scrollbars in/out when it appears/disappears #6844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
emattias opened this issue Nov 29, 2021 · 8 comments
Open

[css-transitions] smoothly transitioning scrollbars in/out when it appears/disappears #6844

emattias opened this issue Nov 29, 2021 · 8 comments
Labels
css-scrollbars-2

Comments

@emattias
Copy link

When the scrollbar is shown/hidden can be very jarring and cause the page to jump. The scrollbar-gutter and scrollbar-width CSS properties gives us some control but to my knowledge it doesn't allow us to make the transition from scrollbar to no scrollbar (and vice versa) a transition rather than a jump.

If this is the wrong place to post this, please let me know where I should post it and I'll do it :)
@fantasai
Copy link
Collaborator

@emattias Are you concerned about the impact on layout being abrupt, or the visual appearance of the scrollbar being abrupt?

I think scrollbar-gutter was intended to solve the former. For the latter, seems to me this is more of a browser quality-of-implementation issue?

@emattias
Copy link
Author

I think scrollbar-gutter was intended to solve the former. For the latter, seems to me this is more of a browser quality-of-implementation issue?

Since everything else on the page can be smootly transitioned/animated I think this should also be able to do this. Similar to how you can do:

html {
  scroll-behavior: smooth;
}

I think you should be able to do something like:

html {
  scrollbar-transition: smooth;
}

(Any maybe with some options for timing etc.)

The problem with scrollbar-gutter is that it avoids the jump but instead you get an awkward space that covers content etc.

@bmathwig
Copy link

bmathwig commented Jun 27, 2022 •
edited
Loading

I agree with @fantasai that this is a browser QoL issue. On Windows, we use a fade transition between 'shy' and 'visible' states of the scrollbar.

Animation of Windows scrollbar hiding behavior!

@emattias
Copy link
Author

The problem is that scrollbar-gutter cant always be used because of the awkward space that gets left when the content is not overflowing (so no scrollbar). I dont think this space is stylable? See the white space to the right here:

CleanShot 2022-06-27 at 22 39 36@2x

So now we have to have this abrupt jump when opening modals:

CleanShot 2022-06-27 at 22 42 29

Its especially noticable when a modal is animated in smoothly. Can't the browser provide a way to have this be smooth also?

Giving developers more control of the "empty scrollbar gutter" might be a way to solve this problem also.

@tabatkins
Copy link
Member

I mean, that "space left when the content is not overflowing" is the entire point of scrollbar-gutter, yeah - it means you don't have any layout shift between the scrolling and non-scrolling space.

Can you give a markup example that's causing you problems with things not extending to the full width?

@emattias
Copy link
Author

I mean, that "space left when the content is not overflowing" is the entire point of scrollbar-gutter, yeah - it means you don't have any layout shift between the scrolling and non-scrolling space.

Yes I understand that. I am not questioning having the space. Just that its an inaccessible area for developers to style. And this makes it unusable in many situations unless the scrollable area that has scrollbar-gutter: stable happens to have a single color background. I guess you might be able to hack somehting together by setting a linear gradient background that matches backgrounds of the header, main etc areas but that seems like a brittle solution.

I would like the web platform to have a better solution for this. The 2 options I can come up with is that the transition between showing/hiding scrollbar area be animated or/and having more control of the scrollbar-gutter area.

Can you give a markup example that's causing you problems with things not extending to the full width?

I threw together a codepen: https://codepen.io/emattias/pen/wvmvaZK?editors=1100 showing the problem.

Also, I noticed now that in chrome it looks like this:

CleanShot 2022-06-28 at 10 06 56@2x

and firefox like this:

CleanShot 2022-06-28 at 10 08 25@2x

Is it a chrome bug?

@bmathwig
Copy link

bmathwig commented Jul 6, 2022

I noticed that you used the scrollbar-gutter on the <header> element itself. To control the gutter color, you can put a <div> inside of the <header> and apply scrollbar-gutter to the <div> rather than the <header>. This will make the internal contents of the <div> to be offset by the scrollbar but maintain the background color of the <header>.

@emattias
Copy link
Author

emattias commented Jul 6, 2022 •
edited
Loading

@bmathwig I'm not following. scrollbar-gutter is applied to <html> in the codepen I linked to above. Could you make a pen showing your suggested change maybe?

Anyway, I still think scrollbar-gutter is unusable for many sites/apps because of the reasons I mentioned before.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-scrollbars-2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@emattias @tabatkins @fantasai @bmathwig