Multiple scrollbars.

[bizzthemes]

Issue Overview

Inner scrollbars are a terrible UX decision and I'm not sure why you closed so many issue reports listing the same problem. One scrollbar should be present at all times and it's pretty simple to fix it. There are so many advantages to this and I don't see any positives with inner scrollbars, they just confuse the hell out of users.

Steps to Reproduce (for bugs)

• Gutenberg version 2.6.0.
• All browsers.
• Expand sidebar meta-boxes and also have multiple menu items in left sidebar (dark color).

Expected Behavior

Only one scrollbar at all times.

Current Behavior

Multiple scrollbars in (right) sidebar section.

Possible Solution

Overflow should work the same as with classic (old) editor, when a lot of content is posted and editor expends over the viewport. Or, see how YouTube handles the (left) sidebar and (right) content.

Screenshots / Video

[danielbachhuber]

Thanks for sharing your feedback, @bizzthemes!

[ZebulanStanphill]

Yeah, I think that 3 scrollbars is at least 1 too many. The scrollbar for the sidebar could just be the same as the main page scrollbar. (Or maybe the main page scrollbar should not even be showing up.)

The UX when scrolling while hovering over a post is quite confusing as well. You have to scroll for about a second or so after it stops moving before the main page scrollbar starts moving, which allows you to be able to scroll down to see the metaboxes. It almost feels unresponsive at first, and it definitely does not feel elegant.

[karmatosed]

By default you shouldn't be seeing so many scrollbars. If you are please include what browser you are viewing in. It also looks like you @bizzthemes are using maybe an older version of Gutenberg? Can you maybe mention what version you are using please?

[ZebulanStanphill]

@karmatosed I am using Firefox Nightly and I see the same number of scrollbars on Chromium.

The rightmost scrollbar comes from both having enough plugins installed to make the WordPress admin nav bar on the left be taller than the window height and/or having metaboxes enabled (in my case Yoast). The scrollbar to the left of it comes from having multiple sections in the Gutenberg sidebar open. The leftmost scrollbar comes from the height of the post content.

There is a difference in behavior between Firefox and Chromium, however. Metaboxes add height to the leftmost scrollbar in Chromium when open, but in Firefox, they add height to the rightmost scrollbar regardless of whether they are open or not.

[davisshaver]

+1. I am seeing these in Chrome. It seems a bit dangerous but something like this could ensure that only the sidebar and editor show scrollbar on webkit browsers:

body.gutenberg-editor-page::-webkit-scrollbar { display: none }

[davisshaver]

Closed #6094 as it obscures original problem.

Another idea is sync-scrolling (https://github.com/asvd/syncscroll) either the admin navbar and post content or the post content and Gutenberg sidebar. Then we could reasonably obscure the inner scrollbar? And not have to refactor the markup as much as it may to accomplish this another way. My leaning would be to sync the admin and post content to match existing behavior.

[GlennMartin1]

Hopefully something will be done about this. I always have three vertical scrollbars, and it surely makes it tough to navigate......

I'm using Chrome on Windows.

[chrisvanpatten]

I get the same but had resigned myself to living with it… hadn't seen this ticket. That third full-page scrollbar is the result of having a bunch of menu items in the WP admin nav sidebar that cause it the full page to overflow.

[mtias]

I don't think there's much that can be done here unless we have our own scrollbar implementation, which could easily become a rabbit hole.

[karmatosed]

I would also underline that having our own scrollbar implementation wouldn't work. If someone has some ideas we can always revisit, but for version one this seems a little out of scope to work on a custom scrollbar solution.