Increase offset

src/scroller.js

@@ -29,7 +29,7 @@ export default function Scroller({
   return (
     <div
       style={{ height: "100%", overflowY: "auto" }}
-      class="scroller"
+      className="scroller"
       ref={ref}
       onScroll={e => setTop(e.target.scrollTop)}
       children={children}

src/slide.js

@@ -13,9 +13,17 @@ theme.styles.forEach(({ types, style }) => {
   });
 });
 
-function Line({ line, style }) {
+function getLineHeight(line, i, { styles }) {
+  return styles[i].height != null ? styles[i].height : 15;
+}
+
+function getLine(line, i, { styles }) {
+  const style = styles[i];
   return (
-    <div style={Object.assign({ overflow: "hidden", height: "15px" }, style)}>
+    <div
+      style={Object.assign({ overflow: "hidden", height: "15px" }, style)}
+      key={line.key}
+    >
       {line.tokens.map((token, i) => {
         const style = themeStylesByType[token.type] || {};
         return (
@@ -28,14 +36,6 @@ function Line({ line, style }) {
   );
 }
 
-function getLineHeight(line, i, { styles }) {
-  return styles[i].height != null ? styles[i].height : 15;
-}
-
-function getLine(line, i, { styles }) {
-  return <Line line={line} style={styles[i]} key={line.key} />;
-}
-
 function Slide({ lines, styles }) {
   const [top, setTop] = React.useState(0);
   return (

src/todo.md

@@ -1,2 +1,4 @@
 - move diffing to web worker
 - make diffing incremental
+- cache all the react elements from the lines + styles
+- only set scrollTop if `top` is different from the last value from the event (and clean the last value from the event after that)

src/use-virtual-children.js

@@ -10,7 +10,7 @@ export default function useChildren({
 }) {
   const children = [];
 
-  const extraRender = 500;
+  const extraRender = 1500;
 
   const topT = top - extraRender;
   const bottomT = top + height + extraRender;