Scrollbar always visible on the right (.cdk-global-scrollblock set on <html>)

I’m submitting a…


[X] Bug report

Current behavior

Since version 8+, in the modal layout, a blank scroll bar is always visible on the right of the gallery.

This is certainly due to the automatic adding of the ‘cdk-global-scrollblock’ class on the <html> node, maybe due to the use of BlockScrollStrategy in ModalGalleryService:getOverlayConfig. Was there a motivation to use this instead of the NoopScrollStrategy for instance?

Expected behavior

No scrollbar on the right! : )

Minimal reproduction of the problem with instructions

On https://ks89.github.io/angular-modal-gallery-2021-v9.github.io/demo/array-simple, “Examples” section, click on the 1st Live demo link.

What is the motivation / use case for changing the behavior?

The scrollbar is unused and most likely unwanted.

Environment (the most important section to fill very carefully)

The one of the demo website https://ks89.github.io/angular-modal-gallery-2021-v9.github.io/demo/array-simple, “Examples” section.

Browser:

Chrome (desktop) version 97
Firefox version 96

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

locinuscommented, Feb 11, 2022

Indeed you’re right. Noop might not be the greatest option.

From my tests:

Windows: displeasing scrollbar
Linux (Ubuntu): thinner scrollbar, more acceptable
Android: invisible scrollbar, all good

I don’t know about iOS smartphones, but I’d say it must be like iOS computers with invisible scrollbars?

So I think a workaround for people wanting to get rid of it on all devices would be to add in the application styles.css :

.cdk-global-scrollblock {
    overflow: hidden !important;
}

One should be careful if they’re using Cdk elsewhere in their application though.

0reactions

Ks89commented, Feb 5, 2022

I tried but using the NoopScrollStrategy it permits page scrolling.

Doc says: “… Note that some applications may implement special or customized page scrolling; if the BlockScrollStrategy conflicts with this kind of situation, it can be overridden by re-providing BlockScrollStrategy with a custom implementation.”.

Probably the only way to fix this is applying some customization. Did you see this issue only on Windows or does it happen also on smart phones, like iOS devices? I feel worried to change this, because I cannot test all devices.