Merge pull request #149 from micooz/fix-fullscreen-scrollbar

hide scrollbars after web-fullscreen
DIYgod · Sep 22, 2017 · d709b0f · d709b0f
2 parents 9c09d32 + 1d44769
commit d709b0f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/src/DPlayer.scss b/src/DPlayer.scss
@@ -1261,4 +1261,13 @@
 
 [data-balloon][data-balloon-pos="up"]:after {
     margin-bottom: 0;
-}
+}
+
+// To hide scroll bar, apply this class to <body>
+.dplayer-web-fullscreen-fix {
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+}
diff --git a/src/fullscreen.js b/src/fullscreen.js
@@ -1,3 +1,5 @@
+import utils from './utils';
+
 class FullScreen {
     constructor (player) {
         this.player = player;
@@ -50,6 +52,11 @@ class FullScreen {
             break;
         case 'web':
             this.player.container.classList.add('dplayer-fulled');
+
+            // record last position then hide scrollbars
+            this.lastScrollPosition = utils.getScrollPosition();
+            document.body.classList.add('dplayer-web-fullscreen-fix');
+
             this.player.events.trigger('webfullscreen');
             break;
         }
@@ -70,6 +77,11 @@ class FullScreen {
             break;
         case 'web':
             this.player.container.classList.remove('dplayer-fulled');
+
+            // restore scrollbars and last position
+            document.body.classList.remove('dplayer-web-fullscreen-fix');
+            utils.setScrollPosition(this.lastScrollPosition);
+
             this.player.events.trigger('webfullscreen_cancel');
             break;
         }

diff --git a/src/utils.js b/src/utils.js
@@ -36,11 +36,32 @@ module.exports = {
         return actualLeft - elementScrollLeft;
     },
 
+    getScrollPosition () {
+        return {
+            left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
+            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+        };
+    },
+
+    setScrollPosition ({left = 0, top = 0}) {
+        if (this.isFirefox) {
+            document.documentElement.scrollLeft = left;
+            document.documentElement.scrollTop = top;
+        }
+        else {
+            window.scrollTo(left, top);
+        }
+    },
+
     /**
      * check if user is using mobile or not
      */
     isMobile: /mobile/i.test(window.navigator.userAgent),
 
+    isFirefox: /firefox/i.test(window.navigator.userAgent),
+
+    isChrome: /chrome/i.test(window.navigator.userAgent),
+
     storage: {
         set: (key, value) => {
             localStorage.setItem(key, value);