fix: sidebar scrolling on ios devices

facebook · Dec 19, 2018 · aa26620 · aa26620
1 parent 0a5cf8f
commit aa26620
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 8 deletions.
diff --git a/v1/lib/core/nav/SideNav.js b/v1/lib/core/nav/SideNav.js
@@ -134,8 +134,8 @@ class SideNav extends React.Component {
           dangerouslySetInnerHTML={{
             __html: `
             document.addEventListener('DOMContentLoaded', function() {
-              createToggler('#navToggler', '#docsNav', 'docsSliderActive');
-              createToggler('#tocToggler', 'body', 'tocActive');
+              createModalToggler('#navToggler', 'docsSliderActive');
+              createModalToggler('#tocToggler', 'tocActive');
 
               const headings = document.querySelector('.toc-headings');
               headings && headings.addEventListener('click', function(event) {
@@ -144,19 +144,51 @@ class SideNav extends React.Component {
                 }
               }, false);
 
-              function createToggler(togglerSelector, targetSelector, className) {
+              function createModalToggler(togglerSelector, className) {
                 var toggler = document.querySelector(togglerSelector);
-                var target = document.querySelector(targetSelector);
 
                 if (!toggler) {
                   return;
                 }
 
-                toggler.onclick = function(event) {
+                toggler.onclick = isIOS() ? getIOSToggleHandler(className) : getToggleHandler(className);
+              }
+
+              function isIOS() {
+                var iOSDevices = ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'];
+              
+                if (!!navigator.platform) {
+                  while (iOSDevices.length) {
+                    if (navigator.platform === iOSDevices.pop()) {
+                       return true; 
+                    }
+                  }
+                }
+              
+                return false;
+              }
+
+              function getToggleHandler(className) {
+                return function(event) {
                   event.preventDefault();
+                  document.body.classList.toggle(className);
+                }
+              }
+
+              function getIOSToggleHandler(className) {
+                var savedScrollY;
 
-                  target.classList.toggle(className);
-                };
+                return function(event) {
+                  event.preventDefault();
+                  var isToggledOnNow = document.body.classList.contains(className);
+                  if (isToggledOnNow) {
+                    document.body.classList.remove(className, 'ios')
+                    window.scrollTo(0, savedScrollY);
+                  } else {
+                    savedScrollY = window.scrollY;
+                    document.body.classList.add(className, 'ios')
+                  }
+                }
               }
             });
         `,

diff --git a/v1/lib/static/css/main.css b/v1/lib/static/css/main.css
@@ -1616,7 +1616,21 @@ input::placeholder {
   }
 }
 
-.docsSliderActive.docsNavContainer {
+.tocActive, .docsSliderActive {
+  overflow: hidden;
+}
+
+.tocActive.ios, .docsSliderActive.ios {
+  position: fixed;
+}
+
+.tocActive.ios .mainContainer, 
+.docsSliderActive.ios .mainContainer {
+  transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0,0,0);
+}
+
+.docsSliderActive .docsNavContainer {
   box-sizing: border-box;
   height: 100%;
   -webkit-overflow-scrolling: touch;