Merge pull request #623 from GoOz/feat/bodyScrollLockModal

feat: ✨ Add Body Scroll Lock for Modals
cozy · Oct 5, 2018 · a03d9fd · a03d9fd
2 parents 1f3f87a + 1a1458f
commit a03d9fd
Show file tree

Hide file tree

Showing 3 changed files with 704 additions and 746 deletions.
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
   },
   "dependencies": {
     "babel-preset-cozy-app": "^0.3.1",
+    "body-scroll-lock": "^2.5.8",
     "classnames": "^2.2.5",
     "date-fns": "^1.28.5",
     "hammerjs": "^2.0.8",

diff --git a/react/Modal/index.jsx b/react/Modal/index.jsx
@@ -9,6 +9,7 @@ import migrateProps from '../helpers/migrateProps'
 import palette from '../../stylus/settings/palette.json'
 import Portal from 'preact-portal'
 import uniqueId from 'lodash/uniqueId'
+import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
 
 class AnimatedContentHeader extends Component {
   render() {
@@ -56,12 +57,12 @@ class ModalContent extends Component {
     this.scrollingContent.addEventListener('scroll', this.handleScroll, {
       passive: true
     })
-    document.body.classList.add('has-modal')
+    disableBodyScroll(this.scrollingContent)
   }
 
   componentWillUnmount() {
     this.scrollingContent.removeEventListener('scroll', this.handleScroll)
-    document.body.classList.remove('has-modal')
+    clearAllBodyScrollLocks()
   }
 
   handleScroll = () => {