diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 38e056df89..9eb61de074 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -44,6 +44,11 @@ body { overflow-x: hidden; background-color: transparent !important; -webkit-font-smoothing: antialiased; + + /* This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages + that need the scrollbar and pages that don't. + */ + overflow-y: scroll; } .mainAnimatedPage { @@ -122,10 +127,6 @@ div[data-role=page] { padding-bottom: 4em; } -.force-scroll { - overflow-y: scroll; -} - .hide-scroll { overflow-y: hidden; } diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index 028c21b221..f41f864848 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -492,7 +492,6 @@ export default function (options) { document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove); // Shows page scrollbar document.body.classList.remove('hide-scroll'); - document.body.classList.add('force-scroll'); } /** @@ -657,7 +656,6 @@ export default function (options) { self.show = function () { createElements(options); // Hides page scrollbar - document.body.classList.remove('force-scroll'); document.body.classList.add('hide-scroll'); }; diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index d07e6aae58..9b9b7011da 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -107,7 +107,7 @@ function tryRemoveElement(elem) { const animatedPage = document.querySelector('.page:not(.hide)'); animatedPage.classList.add('hide'); // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded - document.body.classList.remove('force-scroll'); + document.body.classList.add('hide-scroll'); } function zoomIn(elem) { @@ -679,6 +679,7 @@ function tryRemoveElement(elem) { destroyFlvPlayer(this); appRouter.setTransparency('none'); + document.body.classList.remove('hide-scroll'); const videoElement = this.#mediaElement;