diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 627145abc1..d489f77f01 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -120,3 +120,11 @@ div[data-role=page] { .headroom--unpinned { transform: translateY(-100%); } + +.force-scroll { + overflow-y: scroll; +} + +.hide-scroll { + overflow-y: hidden; +} diff --git a/src/components/htmlVideoPlayer/plugin.js b/src/components/htmlVideoPlayer/plugin.js index 65b1c3c29d..3cf1922a3f 100644 --- a/src/components/htmlVideoPlayer/plugin.js +++ b/src/components/htmlVideoPlayer/plugin.js @@ -109,6 +109,8 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa function hidePrePlaybackPage() { let 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'); } function zoomIn(elem) { diff --git a/src/components/skinManager.js b/src/components/skinManager.js index 6937c1cb6c..b0a9178ac4 100644 --- a/src/components/skinManager.js +++ b/src/components/skinManager.js @@ -137,6 +137,8 @@ define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize', function onViewBeforeShow(e) { if (e.detail && e.detail.type === 'video-osd') { + // This removes the space that the scrollbar takes while playing a video + document.body.classList.remove('force-scroll'); return; } @@ -155,6 +157,9 @@ define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize', } } } + // 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. + document.body.classList.add('force-scroll'); } document.addEventListener('viewshow', onViewBeforeShow); diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index 4716135ceb..6ff88a00c9 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -438,6 +438,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f inputManager.off(window, onInputCommand); document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove); + // Shows page scrollbar + document.body.classList.remove('hide-scroll'); + document.body.classList.add('force-scroll'); } /** @@ -603,6 +606,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f */ self.show = function () { createElements(options); + // Hides page scrollbar + document.body.classList.remove('force-scroll'); + document.body.classList.add('hide-scroll'); }; /**