Merge pull request #564 from transloadit/dashboard/fix-scroll

Dashboard: fix modal scroll

src/plugins/Dashboard/Dashboard.js

@@ -28,7 +28,6 @@ module.exports = function Dashboard (props) {
     'uppy',
     'uppy-Dashboard',
     { 'Uppy--isTouchDevice': isTouchDevice() },
-    { 'uppy-Dashboard--semiTransparent': props.semiTransparent },
     { 'uppy-Dashboard--modal': !props.inline },
     { 'uppy-Dashboard--wide': props.isWide }
   )

src/plugins/Dashboard/index.js

@@ -87,7 +87,6 @@ module.exports = class Dashboard extends Plugin {
       width: 750,
       height: 550,
       thumbnailWidth: 280,
-      semiTransparent: false,
       defaultTabIcon: defaultTabIcon,
       showProgressDetails: false,
       hideUploadButton: false,
@@ -97,6 +96,7 @@ module.exports = class Dashboard extends Plugin {
       disableStatusBar: false,
       disableInformer: false,
       disableThumbnailGenerator: false,
+      disablePageScrollWhenModalOpen: true,
       onRequestCloseModal: () => this.closeModal(),
       locale: defaultLocale
     }
@@ -225,10 +225,9 @@ module.exports = class Dashboard extends Plugin {
     // save active element, so we can restore focus when modal is closed
     this.savedActiveElement = document.activeElement
 
-    // add class to body that sets position fixed, move everything back
-    // to scroll position
-    document.body.classList.add('uppy-Dashboard-isOpen')
-    document.body.style.top = `-${this.savedScrollPosition}px`
+    if (this.opts.disablePageScrollWhenModalOpen) {
+      document.body.classList.add('uppy-Dashboard-isOpen')
+    }
 
     this.updateDashboardElWidth()
     this.setFocusToFirstNode()
@@ -239,9 +238,11 @@ module.exports = class Dashboard extends Plugin {
       isHidden: true
     })
 
-    document.body.classList.remove('uppy-Dashboard-isOpen')
+    if (this.opts.disablePageScrollWhenModalOpen) {
+      document.body.classList.remove('uppy-Dashboard-isOpen')
+    }
+
     this.savedActiveElement.focus()
-    window.scrollTo(0, this.savedScrollPosition)
   }
 
   isModalOpen () {

src/scss/_dashboard.scss

@@ -9,9 +9,8 @@
 
 // Added to body to prevent the page from scrolling when Modal is open
 .uppy-Dashboard-isOpen {
-  width: 100%;
   overflow: hidden;
-  position: fixed;
+  height: 100vh;
 }
 
 .uppy-Dashboard--modal .uppy-Dashboard-overlay {

website/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "hexo": {
-    "version": "3.3.7"
+    "version": "3.5.0"
   },
   "dependencies": {
     "autoprefixer": "^7.2.5",
@@ -42,4 +42,4 @@
     "remark": "5.0.1",
     "watchify": "^3.9.0"
   }
-}
+}