Compensate for scrollbar
-
Hi Team
please can you guide me how to avoid the little jump of the page when the image is shown in the lightbox.
That’s because of the right scrollbar.
Best Regards Michael
-
By default, Lightbox with PhotoSwipe tries to hide the scrollbar when the lightbox opens. If this does not work well with your website you can just disable this in the settings. See in the “General” tab in “Other options”. Disable “Hide scrollbars when opening the lightbox”. This will however keep the scrollbar visible, since it is part of the browser UI. So either way, there is no perfect solution, sorry.
For explanation: since scrollbars are part of the browser UI you can not place HTML elements on top of it. Instead the only way to hide scrollbar is to change the CSS of the root document element to use “overflow: hidden”. This may cause a little “jump”, because a centered document view may move to the right a bit when the scrollbar disappears. Unfortunately, there is no easy way to compensate for this, since there is no way to determine exact width of the scrollbar to add a right padding as compensation for this.
It also depends on the browser how this is handled – for example on my demo page I don’t see any “jumps” with Vivaldi or Firefox running in Linux:
https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5-overlay-caption/
If that also works for you, maybe you can examine the layout of the template to adjust your website as well.
Hi Arno
thanks for the quick response and your explanation. I’m currently working with the Chrome Browser and there is a “jump” independent of the settings unfortunatelly.
Best Regards Michael
Does this “jump” also happen on the demo site or only on your website? When you disable the option to hide the scrollbar, there is no technical explantion, how this can happen, since the content is not shifted at all then. Do you have a demo URL where this effect can be seen?
You still have the option “Hide scrollbars when opening the lightbox” enabled, as I can see in the source code:
... "hide_scrollbars":"1" ...Please have a look in the backend of your website:
“Settings” -> “Lightbox with PhotoSwipe” -> Tab “General” -> Option “Hide scrollbars when opening the lightbox (this may not work with your theme)”
Disable this option. And if you use some kind of caching, make sure, the caches get updated as well and do not send the old content without this change.
Edit:
Auf Deutsch ist das “Einstelllungen” -> “Lightbox mit PhotoSwipe” -> Tab “Allgemein” -> Option “Bildlaufleisten ausblenden, wenn die Lightbox geöffnet wird (das funktioniert eventuell nicht mit Deinem Theme)”.
Viel Erfolg.
-
This reply was modified 2 weeks, 5 days ago by
Arno Welzel.
Hi Arne
Top! You saved my day.
Viele Grüße
-
This reply was modified 2 weeks, 5 days ago by
You must be logged in to reply to this topic.