Hide scrollbars entirely?

[geertvdheide1]

I'm using the option fitView: true because I don't need vertical scrolling of tall images in the lightbox. There's a minor visual annoyance though: on desktop, at least in Firefox and Chrome in Windows, a disabled scrollbar remains visible even though it does nothing. And this places the close button and the next slide button right up to that disabled scrollbar, with no spacing. This makes those buttons less visible, and it makes the right side look different from the left. It's less clean than I'd like.

I've solved this by adding the following to my stylesheet:

.vbox-container { overflow-y: hidden; }

This seems to work fine on desktop and mobile.

Should this be default for cases where fitView is used? Or are there edge cases where this isn't safe, even with fitView active? If there are no issues with this tweak, then maybe consider adding this to the project.

[wwwbarnamehadotnet]

i had same problem too i did like as you, i just added .vbox-container { overflow-y: hidden; } without use fitView: true

[ribeiroeder]

The script is excellent, but I was bothered by this problem that causes a gap in the sidebar view when opening any modal, regardless of whether fitview is true or false.

Comparing with other modal scripts I noticed that they use a padding-right technique to prevent the layout from moving to the side. So I used the JS callbacks to generate this same technique.

onPreOpen: function() {
    var scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
    document.body.style.paddingRight = scrollBarWidth + 'px';
},

onPreClose: function() {
    document.body.style.paddingRight = '';
},

In the CSS I made this change so that the bar only appears when necessary and smaller than the default

.vbox-container { overflow-y: auto; scrollbar-width: thin; }