diff --git a/src/DPlayer.scss b/src/DPlayer.scss index 55416fde3..a0660dcde 100644 --- a/src/DPlayer.scss +++ b/src/DPlayer.scss @@ -1261,4 +1261,13 @@ [data-balloon][data-balloon-pos="up"]:after { margin-bottom: 0; -} \ No newline at end of file +} + +// To hide scroll bar, apply this class to +.dplayer-web-fullscreen-fix { + position: fixed; + top: 0; + left: 0; + margin: 0; + padding: 0; +} diff --git a/src/fullscreen.js b/src/fullscreen.js index bb69b2f0f..3af79a6a0 100644 --- 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 index 2f56c6a84..cb74b1095 100644 --- 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);