added infinite scroll demo

WebReflection · WebReflection · commit 3ff7b771d9c5 · 2017-09-07T08:07:47.000+01:00
diff --git a/hyperhtml.js b/hyperhtml.js
@@ -1193,7 +1193,7 @@ var hyperHTML = (function (globalDocument, majinbuu) {'use strict';
   // changes needed to show the a new list
   // where there was another one.
   // There is a limit, in terms of performance,
-  // on how bug can the optimal computation be,
+  // on how big can the optimal computation be,
   // so if you change this value be sure your
   // target hardware is good enough.
   hyper.MAX_LIST_SIZE = 1000;
diff --git a/test/infinite.html b/test/infinite.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Infinite Scroll</title>
+    <script defer src="../min.js"></script>
+    <script>
+    addEventListener('DOMContentLoaded', () => {
+      var view = document.querySelector('.infinite');
+      var scrollTop = 0;
+      view.addEventListener('mousewheel', (e) => {
+        scrollTop += e.deltaY;
+        if (scrollTop < 0) scrollTop = 0;
+        update();
+      }, {passive: true});
+      var render = hyperHTML.bind(view);
+      var list = [];
+      var sampleHeight = 60;
+      var colors = [];
+      update();
+      function color(i) {
+        return colors[i] || (colors[i] = `rgb(${[
+          Math.round(Math.random() * 155 + 150),
+          Math.round(Math.random() * 155 + 150),
+          Math.round(Math.random() * 155 + 150)
+        ].join(',')})`);
+      }
+      function update() {
+        var i = Math.max(0, Math.floor(scrollTop / sampleHeight));
+        var count = 0;
+        var newList = [];
+        var clientHeight = view.clientHeight;
+        while ((count * sampleHeight) < (clientHeight + sampleHeight)) {
+          newList[count] = list[i] || (list[i] = hyperHTML
+          `<p style="${'background:' + color(i)}">Value ${Math.random()}</p>`);
+          count++;
+          i++;
+        }
+        render`${newList}`;
+        view.scrollTop = scrollTop % sampleHeight;
+      }
+    }, {once: true});
+    </script>
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      div {
+        margin: auto;
+        height: 100vh;
+        max-width: 320px;
+        background: #eee;
+      }
+      .infinite {
+        padding: 0;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+      .infinite > p {
+        text-align: center;
+        line-height: 48px;
+        padding: 0;
+        margin: 0;
+        border: 8px solid silver;
+        vertical-align: middle;
+        border-bottom: none;
+        height: 60px;
+        font-family: sans-serif;
+      }
+      .infinite > *,
+      .infinite > *:before,
+      .infinite > *:after {
+        box-sizing: inherit;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="infinite"></div>
+  </body>
+</html>
