Merge pull request #1229 from ferferga/scrollbar-placeholder

Keep scrollbar always present to avoid UI clipping

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;
+}

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) {

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);

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');
         };
 
         /**