Add scrollfix for iOS

material/base.html

@@ -110,7 +110,7 @@ <h1>{{ page.title | default(config.site_name, true)}}</h1>
           <script src="https://cdn.mathjax.org/{{ path }}"></script>
         {% endif %}
       {% endfor %}
-      <script src="{{ base_url }}/assets/javascripts/application-f33e110d6b.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-2442e71194.js"></script>
       <script>var config={url:{base:"{{ base_url }}"}},app=new Application(config);app.initialize()</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>

material/partials/nav-item.html

@@ -12,7 +12,7 @@
       <label class="md-nav__title" for="{{ path }}">
         {{ nav_item.title}}
       </label>
-      <ul class="md-nav__list">
+      <ul class="md-nav__list" data-md-scrollfix>
         {% for nav_item in nav_item.children %}
           {% set temp = path %}
           {% set path = path + "-" + loop.index | string %}

material/partials/nav.html

@@ -14,7 +14,7 @@
       {% include "partials/source.html" %}
     </div>
   {% endif %}
-  <ul class="md-nav__list">
+  <ul class="md-nav__list" data-md-scrollfix>
     {% for nav_item in nav %}
       {% set path = "nav-" + loop.index | string %}
       {% include "partials/nav-item.html" %}

material/partials/search.html

@@ -6,7 +6,7 @@
       <label class="md-icon md-search__icon" for="search"></label>
     </form>
     <div class="md-search__output">
-      <div class="md-search__scrollwrap">
+      <div class="md-search__scrollwrap" data-md-scrollfix>
         <div class="md-search-result" data-md-component="result"></div>
       </div>
     </div>

material/partials/toc.html

@@ -5,7 +5,7 @@
   {% endif %}
   {% if toc and (toc | first) %}
     <label class="md-nav__title" for="toc">Table of contents</label>
-    <ul class="md-nav__list">
+    <ul class="md-nav__list" data-md-scrollfix>
       {% for toc_item in toc %}
         {% include "partials/toc-item.html" %}
       {% endfor %}

src/assets/javascripts/application.js

@@ -72,6 +72,25 @@ export default class Application {
         }
         wrap.appendChild(table)
       })
+
+      /* Force 1px scroll offset to trigger overflow scrolling */
+      if (Modernizr.ios) {
+        const scrollable = document.querySelectorAll("[data-md-scrollfix]")
+        Array.prototype.forEach.call(scrollable, item => {
+          item.addEventListener("touchstart", () => {
+            const top = item.scrollTop
+
+            /* We're at the top of the container */
+            if (top === 0) {
+              item.scrollTop = 1
+
+            /* We're at the bottom of the container */
+            } else if (top + item.offsetHeight === item.scrollHeight) {
+              item.scrollTop = top - 1
+            }
+          })
+        })
+      }
     }).listen()
 
     /* Component: sidebar container */

src/partials/nav-item.html

@@ -41,7 +41,7 @@
       <label class="md-nav__title" for="{{ path }}">
         {{ nav_item.title}}
       </label>
-      <ul class="md-nav__list">
+      <ul class="md-nav__list" data-md-scrollfix>
 
         <!-- Render nested item list -->
         {% for nav_item in nav_item.children %}

src/partials/nav.html

@@ -38,7 +38,7 @@
       {% include "partials/source.html" %}
     </div>
   {% endif %}
-  <ul class="md-nav__list">
+  <ul class="md-nav__list" data-md-scrollfix>
     {% for nav_item in nav %}
       {% set path = "nav-" + loop.index | string %}
       {% include "partials/nav-item.html" %}

src/partials/search.html

@@ -31,7 +31,7 @@
       <label class="md-icon md-search__icon" for="search"></label>
     </form>
     <div class="md-search__output">
-      <div class="md-search__scrollwrap">
+      <div class="md-search__scrollwrap" data-md-scrollfix>
         <div class="md-search-result" data-md-component="result"></div>
       </div>
     </div>

src/partials/toc.html

@@ -37,7 +37,7 @@
   <!-- Render item list -->
   {% if toc and (toc | first) %}
     <label class="md-nav__title" for="toc">Table of contents</label>
-    <ul class="md-nav__list">
+    <ul class="md-nav__list" data-md-scrollfix>
       {% for toc_item in toc %}
         {% include "partials/toc-item.html" %}
       {% endfor %}