Fix ios mobile menu scroll

layouts/partials/nav-mobile.html

@@ -1,12 +1,12 @@
-<div  class="globalmenu mobilemenu pb3 dn">
+<div  class="globalmenu mobilemenu pb3 dn overflow-y-scroll pt5" style="max-height: 90vh;">
     {{ partial "nav-links-global-mobile.html" . }}
 </div>
-<div  class="docsmenu mobilemenu pb3 dn">
+<div  class="docsmenu mobilemenu pb3 dn overflow-y-scroll pt5" style="max-height: 90vh;">
     {{ partial "nav-links-docs-mobile.html" . }}
 </div>
 
 <div class="flex dn-l justify-between">
-  <button class="js-toggle flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link mr2 white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".globalmenu">Menu</button>
+  <button class="js-toggle mobilemenu-toggler flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link mr2 white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".globalmenu">Menu</button>
 
-  <button class="js-toggle flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".docsmenu">Docs Menu</button>
+  <button class="js-toggle mobilemenu-toggler flex-auto dib dn-l f6 tc db mt4-ns ph3 pv2 link white bg-primary-color-dark hover-bg-primary-color ba b--white-40 w-auto" data-target=".docsmenu">Docs Menu</button>
 </div>

layouts/partials/site-footer.html

@@ -41,7 +41,7 @@
 
     <img src="/images/gopher-side_color.svg" class="absolute-l bottom-0 dn db-l h4 right-0 z-999"/>
 
-    <div class="bg-primary-color-dark bottom-0 left-0 right-0 dn-l fixed pb3 ph3 w-100">
+    <div class="bg-primary-color-dark pt4  bottom-0 left-0 right-0 dn-l fixed pb3 ph3 w-100">
       {{- partial "nav-mobile.html" . -}}
     </div>
 

src/js/menutoggle.js

@@ -1,4 +1,5 @@
 // Grab any element that has the 'js-toggle' class and add an event listner for the toggleClass function
+var bodyScrollLock = require('body-scroll-lock');
 var toggleBtns = document.getElementsByClassName('js-toggle')
   for (var i = 0; i < toggleBtns.length; i++) {
     toggleBtns[i].addEventListener('click', toggleClass, false)
@@ -11,21 +12,29 @@ function toggleClass() {
   var mobileCurrentlyOpen = document.querySelector('.mobilemenu:not(.dn)')
   var desktopCurrentlyOpen = document.querySelector('.desktopmenu:not(.dn)')
   var desktopActive = document.querySelector('.desktopmenu:not(.dn)')
-
+  var mobileWillOpen = false
   // Loop through the targets' divs
   for (var i = 0; i < content.length; i++) {
     var matches = document.querySelectorAll(content[i]);
     //for each, if the div has the 'dn' class (which is "display:none;"), remove it, otherwise, add that class
     [].forEach.call(matches, function(dom) {
-        dom.classList.contains('dn') ?
-        dom.classList.remove('dn') :
-        dom.classList.add('dn');
+        if (dom.classList.contains('dn')) {
+          dom.classList.remove('dn')
+          if (dom.classList.contains("mobilemenu")){
+            // disable body scroll so this menu may scroll on ios.
+            bodyScrollLock.disableBodyScroll(dom)
+            mobileWillOpen = true
+          }
+        } else {
+          dom.classList.add('dn')
+        }
          return false;
        });
         // close the currently open menu items
       if (mobileCurrentlyOpen) mobileCurrentlyOpen.classList.add('dn')
       if (desktopCurrentlyOpen) desktopCurrentlyOpen.classList.add('dn')
       if (desktopActive) desktopActive.classList.remove('db')
-
     }
+    if (!mobileWillOpen) bodyScrollLock.clearAllBodyScrollLocks()
   }
+

src/package.json

@@ -32,5 +32,7 @@
     "tachyons": "^4.7.0",
     "webpack": "^2.3.3"
   },
-  "dependencies": {}
+  "dependencies": {
+    "body-scroll-lock": "^2.5.7"
+  }
 }