vscroll 1.4.1 → 1.5.0

package/dist/bundles/vscroll.umd.js

@@ -1,6 +1,6 @@
 /**
  * vscroll (https://github.com/dhilt/vscroll) UMD
- * Version: 1.4.1 (2021-11-02T00:21:12.677Z)
+ * Version: 1.5.0 (2022-02-02T15:07:24.737Z)
  * Author: Denis Hilt
  * License: MIT
  */
@@ -94,7 +94,7 @@
 
     /**
      * vscroll (https://github.com/dhilt/vscroll) FESM5
-     * Version: 1.4.1 (2021-11-02T00:21:05.317Z)
+     * Version: 1.5.0 (2022-02-02T15:07:19.169Z)
      * Author: Denis Hilt
      * License: MIT
      */
@@ -435,7 +435,7 @@
 
     var core = {
       name: 'vscroll',
-      version: '1.4.1'
+      version: '1.5.0'
     };
 
     var instanceCount$1 = 0;
@@ -544,7 +544,7 @@
       ValidatorType["enum"] = "must belong to {arg1} list";
     })(ValidatorType || (ValidatorType = {}));
     var getError = function (msg, args) {
-      return (args || ['']).reduce(function (acc, arg, index) { return acc.replace("{arg" + (index + 1) + "}", arg); }, msg);
+      return (args || ['']).reduce(function (acc, arg, index) { return acc.replace("{arg".concat(index + 1, "}"), arg); }, msg);
     };
     var getNumber = function (value) {
       return typeof value === 'number' || (typeof value === 'string' && value !== '')
@@ -709,7 +709,7 @@
           }
           var isAnotherPresent = context && Object.prototype.hasOwnProperty.call(context, token);
           if (isSet && isAnotherPresent) {
-            errors.push(getError(err, [tokens.join('", "')]) + (" (" + token + " is present)"));
+            errors.push(getError(err, [tokens.join('", "')]) + " (".concat(token, " is present)"));
             break;
           }
           if (noOneIsPresent && isAnotherPresent) {
@@ -834,9 +834,9 @@
       ValidatedData.prototype.setParam = function (token, value) {
         if (!value.isValid) {
           value.errors = !value.isSet
-            ? ["\"" + token + "\" must be set"]
+            ? ["\"".concat(token, "\" must be set")]
             : value.errors.map(function (err) {
-              return "\"" + token + "\" " + err;
+              return "\"".concat(token, "\" ").concat(err);
             });
         }
         this.params[token] = value;
@@ -1424,7 +1424,7 @@
               scroller.workflow.call({
                 process: process,
                 status: ProcessStatus.error,
-                payload: { error: "Wrong argument of the \"" + process + "\" method call" }
+                payload: { error: "Wrong argument of the \"".concat(process, "\" method call") }
               });
             }
           }
@@ -1442,10 +1442,10 @@
         return _super !== null && _super.apply(this, arguments) || this;
       }
       Init.run = function (scroller, process) {
-        var cycle = scroller.state.cycle, workflow = scroller.workflow;
+        var state = scroller.state, workflow = scroller.workflow;
         var isInitial = initProcesses.includes(process);
         scroller.logger.logCycle(true);
-        cycle.start(isInitial, process);
+        state.startWorkflowCycle(isInitial, process);
         workflow.call({
           process: Init.process,
           status: ProcessStatus.next
@@ -1471,16 +1471,16 @@
         });
       };
       Scroll.onSynthetic = function (scroller, position) {
-        var scrollState = scroller.state.scrollState;
-        var synthPos = scrollState.syntheticPosition;
+        var scroll = scroller.state.scroll;
+        var synthPos = scroll.syntheticPosition;
         if (synthPos !== null) {
-          if (scrollState.syntheticFulfill) {
-            scrollState.syntheticPosition = null;
+          if (scroll.syntheticFulfill) {
+            scroll.syntheticPosition = null;
           }
-          if (!scrollState.syntheticFulfill || synthPos === position) {
+          if (!scroll.syntheticFulfill || synthPos === position) {
             scroller.logger.log(function () { return [
               'skipping scroll', position,
-              "[" + (scrollState.syntheticFulfill ? '' : 'pre-') + "synthetic]"
+              "[".concat(scroll.syntheticFulfill ? '' : 'pre-', "synthetic]")
             ]; });
             return true;
           }
@@ -1491,31 +1491,31 @@
         return false;
       };
       Scroll.onThrottle = function (scroller, position, done) {
-        var scrollState = scroller.state.scrollState, throttle = scroller.settings.throttle, logger = scroller.logger;
-        scrollState.current = Scroll.getScrollEvent(position, scrollState.previous);
-        var _a = scrollState.current, direction = _a.direction, time = _a.time;
-        var timeDiff = scrollState.previous ? time - scrollState.previous.time : Infinity;
+        var scroll = scroller.state.scroll, throttle = scroller.settings.throttle, logger = scroller.logger;
+        scroll.current = Scroll.getScrollEvent(position, scroll.previous);
+        var _a = scroll.current, direction = _a.direction, time = _a.time;
+        var timeDiff = scroll.previous ? time - scroll.previous.time : Infinity;
         var delta = throttle - timeDiff;
         var shouldDelay = isFinite(delta) && delta > 0;
-        var alreadyDelayed = !!scrollState.scrollTimer;
+        var alreadyDelayed = !!scroll.scrollTimer;
         logger.log(function () { return [
           direction === exports.Direction.backward ? '\u2934' : '\u2935',
           position,
           shouldDelay ? (timeDiff + 'ms') : '0ms',
-          shouldDelay ? (alreadyDelayed ? 'delayed' : "/ " + delta + "ms delay") : ''
+          shouldDelay ? (alreadyDelayed ? 'delayed' : "/ ".concat(delta, "ms delay")) : ''
         ]; });
         if (!shouldDelay) {
-          if (scrollState.scrollTimer) {
-            clearTimeout(scrollState.scrollTimer);
-            scrollState.scrollTimer = null;
+          if (scroll.scrollTimer) {
+            clearTimeout(scroll.scrollTimer);
+            scroll.scrollTimer = null;
           }
           done();
           return;
         }
         if (!alreadyDelayed) {
-          scrollState.scrollTimer = setTimeout(function () {
+          scroll.scrollTimer = setTimeout(function () {
             logger.log(function () {
-              var curr = Scroll.getScrollEvent(scroller.viewport.scrollPosition, scrollState.current);
+              var curr = Scroll.getScrollEvent(scroller.viewport.scrollPosition, scroll.current);
               return [
                 curr.direction === exports.Direction.backward ? '\u2934' : '\u2935',
                 curr.position,
@@ -1524,7 +1524,7 @@
                 position
               ];
             });
-            scrollState.scrollTimer = null;
+            scroll.scrollTimer = null;
             done();
           }, delta);
         }
@@ -1543,11 +1543,11 @@
         return { position: position, direction: direction, time: time };
       };
       Scroll.onScroll = function (scroller, workflow) {
-        var _a = scroller.state, scrollState = _a.scrollState, cycle = _a.cycle;
-        scrollState.previous = __assign({}, scrollState.current);
-        scrollState.current = null;
+        var _a = scroller.state, scroll = _a.scroll, cycle = _a.cycle;
+        scroll.previous = __assign({}, scroll.current);
+        scroll.current = null;
         if (cycle.busy.get()) {
-          scroller.logger.log(function () { return ['skipping scroll', scrollState.previous.position, '[pending]']; });
+          scroller.logger.log(function () { return ['skipping scroll', scroll.previous.position, '[pending]']; });
           return;
         }
         workflow.call({
@@ -1608,7 +1608,7 @@
         viewport.reset(buffer.startIndex);
         var payload = {};
         if (state.cycle.busy.get()) {
-          state.scrollState.cleanupTimers();
+          state.scroll.stop();
           payload.finalize = true;
           state.cycle.interrupter = Reload.process;
         }
@@ -1998,7 +1998,7 @@
           }
         }
         // virtual removal
-        scroller.logger.log(function () { return "going to remove " + toRemove.length + " item(s) virtually"; });
+        scroller.logger.log(function () { return "going to remove ".concat(toRemove.length, " item(s) virtually"); });
         buffer.removeVirtually(toRemove, !!increase);
         buffer.checkDefaultSize();
         Remove.shiftFirstVisibleIndex(scroller, toRemove, !!increase);
@@ -2232,8 +2232,8 @@
           startDelta += buffer.getSizeByIndex(index);
         }
         scroller.logger.log(function () { return __spreadArray([
-          "start delta is " + startDelta
-        ], __read((offset ? [" (+" + offset + " offset)"] : [])), false); });
+          "start delta is ".concat(startDelta)
+        ], __read((offset ? [" (+".concat(offset, " offset)")] : [])), false); });
         return startDelta;
       };
       PreFetch.setFirstIndex = function (scroller) {
@@ -2404,17 +2404,17 @@
             direction_1 = fetch.last.index < buffer.items[0].$index ? exports.Direction.backward : exports.Direction.forward;
           }
           fetch.direction = direction_1;
-          scroller.logger.log(function () { return "fetch direction is \"" + direction_1 + "\""; });
+          scroller.logger.log(function () { return "fetch direction is \"".concat(direction_1, "\""); });
         }
       };
       PreFetch.getStatus = function (scroller) {
         var _a = scroller.state, cycle = _a.cycle, fetch = _a.fetch;
         if (cycle.initiator === AdapterProcess.clip) {
-          scroller.logger.log(function () { return "going to skip fetch due to \"" + AdapterProcess.clip + "\" process"; });
+          scroller.logger.log(function () { return "going to skip fetch due to \"".concat(AdapterProcess.clip, "\" process"); });
           return ProcessStatus.next;
         }
         if (fetch.shouldFetch) {
-          scroller.logger.log(function () { return "going to fetch " + fetch.count + " items started from index " + fetch.index; });
+          scroller.logger.log(function () { return "going to fetch ".concat(fetch.count, " items started from index ").concat(fetch.index); });
           return ProcessStatus.next;
         }
         return ProcessStatus.done;
@@ -2432,8 +2432,8 @@
         var box = {
           success: function (data) {
             scroller.logger.log(function () {
-              return "resolved " + data.length + " items " +
-                ("(index = " + scroller.state.fetch.index + ", count = " + scroller.state.fetch.count + ")");
+              return "resolved ".concat(data.length, " items ") +
+                "(index = ".concat(scroller.state.fetch.index, ", count = ").concat(scroller.state.fetch.count, ")");
             });
             scroller.state.fetch.newItemsData = data;
             workflow.call({
@@ -2463,9 +2463,9 @@
           }
         }
         else {
-          var _b = scroller.state, scrollState = _b.scrollState, fetch_1 = _b.fetch, viewport = scroller.viewport;
-          if (scrollState.positionBeforeAsync === null) {
-            scrollState.positionBeforeAsync = viewport.scrollPosition;
+          var _b = scroller.state, scroll_1 = _b.scroll, fetch_1 = _b.fetch, viewport = scroller.viewport;
+          if (scroll_1.positionBeforeAsync === null) {
+            scroll_1.positionBeforeAsync = viewport.scrollPosition;
           }
           fetch_1.cancel = function () {
             box.success = function () { return null; };
@@ -2597,13 +2597,13 @@
         return _super !== null && _super.apply(this, arguments) || this;
       }
       Render.run = function (scroller) {
-        var workflow = scroller.workflow, _a = scroller.state, cycle = _a.cycle, render = _a.render, scrollState = _a.scrollState, viewport = scroller.viewport;
+        var workflow = scroller.workflow, _a = scroller.state, cycle = _a.cycle, render = _a.render, scroll = _a.scroll, viewport = scroller.viewport, routines = scroller.routines;
         scroller.logger.stat('before new items render');
-        if (scrollState.positionBeforeAsync === null) {
-          scrollState.positionBeforeAsync = viewport.scrollPosition;
+        if (scroll.positionBeforeAsync === null) {
+          scroll.positionBeforeAsync = viewport.scrollPosition;
         }
-        render.renderTimer = setTimeout(function () {
-          render.renderTimer = null;
+        render.cancel = routines.render(function () {
+          render.cancel = null;
           if (Render.doRender(scroller)) {
             workflow.call({
               process: Render.process,
@@ -2618,7 +2618,7 @@
               payload: { error: 'Can\'t associate item with element' }
             });
           }
-        }, 0);
+        });
       };
       Render.doRender = function (scroller) {
         var _a = scroller.state, fetch = _a.fetch, render = _a.render, viewport = scroller.viewport, buffer = scroller.buffer, logger = scroller.logger;
@@ -2652,18 +2652,92 @@
       return Render;
     }(BaseProcessFactory(CommonProcess.render)));
 
+    var isInterrupted = function (_a) {
+      var call = _a.call;
+      return !!call.interrupted;
+    };
+    var End = /** @class */ (function (_super) {
+      __extends(End, _super);
+      function End() {
+        return _super !== null && _super.apply(this, arguments) || this;
+      }
+      End.run = function (scroller, _a) {
+        var _b = _a === void 0 ? {} : _a, error = _b.error;
+        var workflow = scroller.workflow, interrupter = scroller.state.cycle.interrupter;
+        if (!error && !interrupter) {
+          // set out params accessible via Adapter
+          End.calculateParams(scroller, workflow);
+        }
+        // explicit interruption for we don't want to go through the inner loop finalizing
+        if (isInterrupted(workflow)) {
+          workflow.call({ process: End.process, status: ProcessStatus.done });
+          return;
+        }
+        var next = End.shouldContinueRun(scroller, error);
+        scroller.state.endInnerLoop();
+        workflow.call({
+          process: End.process,
+          status: next ? ProcessStatus.next : ProcessStatus.done,
+          payload: __assign({}, (interrupter ? { process: interrupter } : {}))
+        });
+      };
+      End.calculateParams = function (scroller, workflow) {
+        var adapter = scroller.adapter, viewport = scroller.viewport, items = scroller.buffer.items;
+        if (adapter.wanted.firstVisible) {
+          var item = viewport.getEdgeVisibleItem(items, exports.Direction.backward).item;
+          if (!item || item.element !== adapter.firstVisible.element) {
+            adapter.firstVisible = item ? item.get() : EMPTY_ITEM;
+          }
+        }
+        // the workflow can be interrupter on firstVisible change
+        if (adapter.wanted.lastVisible && !isInterrupted(workflow)) {
+          var item = viewport.getEdgeVisibleItem(items, exports.Direction.forward).item;
+          if (!item || item.element !== adapter.lastVisible.element) {
+            adapter.lastVisible = item ? item.get() : EMPTY_ITEM;
+          }
+        }
+      };
+      End.shouldContinueRun = function (scroller, error) {
+        var _a = scroller.state, cycle = _a.cycle, fetch = _a.fetch, render = _a.render;
+        // Adapter.reload or Adapter.reset
+        if (cycle.interrupter) {
+          return true;
+        }
+        // critical error
+        if (error) {
+          return false;
+        }
+        // Adapter.check
+        if (fetch.simulate && fetch.isCheck && !render.noSize) {
+          return true;
+        }
+        // Adapter.remove or Adapter.update with clip
+        if (fetch.simulate && fetch.doRemove) {
+          return true;
+        }
+        // common inner loop (App start, scroll, Adapter.clip) with full fetch
+        if (!fetch.simulate && ((fetch.hasNewItems && !render.noSize) || fetch.hasAnotherPack)) {
+          return true;
+        }
+        return false;
+      };
+      return End;
+    }(BaseProcessFactory(CommonProcess.end)));
+
     var Adjust = /** @class */ (function (_super) {
       __extends(Adjust, _super);
       function Adjust() {
         return _super !== null && _super.apply(this, arguments) || this;
       }
       Adjust.run = function (scroller) {
-        var workflow = scroller.workflow, viewport = scroller.viewport, scrollState = scroller.state.scrollState;
-        scrollState.positionBeforeAdjust = viewport.scrollPosition;
+        var workflow = scroller.workflow, viewport = scroller.viewport, scroll = scroller.state.scroll;
+        scroll.positionBeforeAdjust = viewport.scrollPosition;
         Adjust.setPaddings(scroller);
-        scrollState.positionAfterAdjust = viewport.scrollPosition;
+        scroll.positionAfterAdjust = viewport.scrollPosition;
         // scroll position adjustments
         var position = Adjust.calculatePosition(scroller);
+        // additional adjustment if the position can't be reached during the initial cycle
+        Adjust.setAdditionalForwardPadding(scroller, position);
         // set new position using animation frame
         Adjust.setPosition(scroller, position, function () {
           return workflow.call({
@@ -2696,7 +2770,8 @@
         }
         // lack of items case
         var bufferSize = viewport.getScrollableSize() - forward.size - backward.size;
-        var viewportSizeDiff = viewport.getSize() - (bwdSize + bufferSize + fwdSize);
+        var scrollSize = bwdSize + bufferSize + fwdSize;
+        var viewportSizeDiff = viewport.getSize() - scrollSize;
         if (viewportSizeDiff > 0) {
           if (inverse) {
             bwdSize += viewportSizeDiff;
@@ -2705,7 +2780,7 @@
             fwdSize += viewportSizeDiff;
           }
           scroller.logger.log(function () {
-            return inverse ? 'backward' : 'forward' + (" padding will be increased by " + viewportSizeDiff + " to fill the viewport");
+            return inverse ? 'backward' : 'forward' + " padding will be increased by ".concat(viewportSizeDiff, " to fill the viewport");
           });
         }
         backward.size = bwdSize;
@@ -2713,11 +2788,11 @@
         scroller.logger.stat('after paddings adjustments');
       };
       Adjust.calculatePosition = function (scroller) {
-        var viewport = scroller.viewport, buffer = scroller.buffer, _a = scroller.state, fetch = _a.fetch, render = _a.render, scrollState = _a.scrollState;
+        var viewport = scroller.viewport, buffer = scroller.buffer, _a = scroller.state, fetch = _a.fetch, render = _a.render, scroll = _a.scroll;
         var position = viewport.paddings.backward.size;
         // increase the position to meet the expectation of the first visible item
         if (!isNaN(fetch.firstVisible.index) && !isNaN(buffer.firstIndex)) {
-          scroller.logger.log("first index = " + fetch.firstVisible.index + ", delta = " + fetch.firstVisible.delta);
+          scroller.logger.log("first index = ".concat(fetch.firstVisible.index, ", delta = ").concat(fetch.firstVisible.delta));
           var shouldCheckPreSizeExpectation_1 = fetch.shouldCheckPreSizeExpectation(buffer.lastIndex);
           buffer.items.forEach(function (item) {
             // 1) shift of the buffered items before the first visible item
@@ -2736,10 +2811,10 @@
           });
         }
         // slow fetch/render case
-        if (scrollState.positionBeforeAsync !== null) {
-          var diff = render.positionBefore - scrollState.positionBeforeAsync;
+        if (scroll.positionBeforeAsync !== null) {
+          var diff = render.positionBefore - scroll.positionBeforeAsync;
           if (diff !== 0) {
-            scroller.logger.log("shift position due to fetch-render difference (" + diff + ")");
+            scroller.logger.log("shift position due to fetch-render difference (".concat(diff, ")"));
             position += diff;
           }
         }
@@ -2749,22 +2824,47 @@
         }
         return Math.round(position);
       };
+      Adjust.setAdditionalForwardPadding = function (scroller, position) {
+        var viewport = scroller.viewport, buffer = scroller.buffer, cycle = scroller.state.cycle;
+        if (!cycle.isInitial || !End.shouldContinueRun(scroller, null)) {
+          return;
+        }
+        var diff = position - viewport.getMaxScrollPosition();
+        if (diff <= 0) {
+          return;
+        }
+        var last = buffer.getLastVisibleItem();
+        if (!last) {
+          return;
+        }
+        var size = 0;
+        var index = last.$index + 1;
+        while (size <= diff && index <= buffer.absMaxIndex) {
+          size += buffer.getSizeByIndex(index++);
+        }
+        var shift = Math.min(size, diff);
+        if (shift) {
+          viewport.paddings.forward.size += shift;
+          scroller.logger.log("increase fwd padding due to lack of items (".concat(diff, " -> ").concat(shift, ")"));
+        }
+      };
       Adjust.setPosition = function (scroller, position, done) {
-        var scrollState = scroller.state.scrollState, viewport = scroller.viewport;
-        if (!scrollState.hasPositionChanged(position)) {
+        var scroll = scroller.state.scroll, viewport = scroller.viewport, routines = scroller.routines;
+        if (!scroll.hasPositionChanged(position)) {
           return done();
         }
-        scrollState.syntheticPosition = position;
-        scrollState.syntheticFulfill = false;
-        scrollState.animationFrameId = requestAnimationFrame(function () {
-          var inertiaDiff = scrollState.positionAfterAdjust - viewport.scrollPosition;
+        scroll.syntheticPosition = position;
+        scroll.syntheticFulfill = false;
+        scroll.cancelAnimation = routines.animate(function () {
+          scroll.cancelAnimation = null;
+          var inertiaDiff = scroll.positionAfterAdjust - viewport.scrollPosition;
           var diffLog = '';
           if (inertiaDiff > 0) {
             position -= inertiaDiff;
-            scrollState.syntheticPosition = position;
-            diffLog = " (-" + inertiaDiff + ")";
+            scroll.syntheticPosition = position;
+            diffLog = " (-".concat(inertiaDiff, ")");
           }
-          scrollState.syntheticFulfill = true;
+          scroll.syntheticFulfill = true;
           viewport.scrollPosition = position;
           scroller.logger.stat('after scroll adjustment' + diffLog);
           done();
@@ -2796,8 +2896,8 @@
         var firstIndex = fetch.first.indexBuffer;
         var lastIndex = fetch.last.indexBuffer;
         scroller.logger.log(function () {
-          return "looking for " + (fetch.direction ? 'anti-' + fetch.direction + ' ' : '') + "items " +
-            ("that are out of [" + firstIndex + ".." + lastIndex + "] range");
+          return "looking for ".concat(fetch.direction ? 'anti-' + fetch.direction + ' ' : '', "items ") +
+            "that are out of [".concat(firstIndex, "..").concat(lastIndex, "] range");
         });
         if (PreClip.isBackward(scroller, firstIndex)) {
           PreClip.prepareClipByDirection(scroller, exports.Direction.backward, firstIndex);
@@ -2881,7 +2981,7 @@
         var _a;
         var buffer = scroller.buffer, paddings = scroller.viewport.paddings, clip = scroller.state.clip, logger = scroller.logger;
         var size = (_a = {}, _a[exports.Direction.backward] = 0, _a[exports.Direction.forward] = 0, _a);
-        logger.stat("before clip (" + ++clip.callCount + ")");
+        logger.stat("before clip (".concat(++clip.callCount, ")"));
         var itemsToRemove = buffer.items.filter(function (item) {
           if (!item.toRemove) {
             return false;
@@ -2909,10 +3009,10 @@
           });
           return list.length
             ? [
-              "clipped " + list.length + " item(s) from Buffer" +
-                (size.backward ? ", +" + size.backward + " fwd px" : '') +
-                (size.forward ? ", +" + size.forward + " bwd px" : '') +
-                (", range: [" + list[0] + ".." + list[list.length - 1] + "]")
+              "clipped ".concat(list.length, " item(s) from Buffer") +
+                (size.backward ? ", +".concat(size.backward, " fwd px") : '') +
+                (size.forward ? ", +".concat(size.forward, " bwd px") : '') +
+                ", range: [".concat(list[0], "..").concat(list[list.length - 1], "]")
             ]
             : 'clipped 0 items from Buffer';
         });
@@ -2921,76 +3021,6 @@
       return Clip;
     }(BaseProcessFactory(CommonProcess.clip)));
 
-    var isInterrupted = function (_a) {
-      var call = _a.call;
-      return !!call.interrupted;
-    };
-    var End = /** @class */ (function (_super) {
-      __extends(End, _super);
-      function End() {
-        return _super !== null && _super.apply(this, arguments) || this;
-      }
-      End.run = function (scroller, _a) {
-        var _b = _a === void 0 ? {} : _a, error = _b.error;
-        var workflow = scroller.workflow, interrupter = scroller.state.cycle.interrupter;
-        if (!error && !interrupter) {
-          // set out params accessible via Adapter
-          End.calculateParams(scroller, workflow);
-        }
-        // explicit interruption for we don't want to go through the inner loop finalizing
-        if (isInterrupted(workflow)) {
-          workflow.call({ process: End.process, status: ProcessStatus.done });
-          return;
-        }
-        var next = End.finalizeInnerLoop(scroller, error);
-        workflow.call({
-          process: End.process,
-          status: next ? ProcessStatus.next : ProcessStatus.done,
-          payload: __assign({}, (interrupter ? { process: interrupter } : {}))
-        });
-      };
-      End.calculateParams = function (scroller, workflow) {
-        var adapter = scroller.adapter, viewport = scroller.viewport, items = scroller.buffer.items;
-        if (adapter.wanted.firstVisible) {
-          var item = viewport.getEdgeVisibleItem(items, exports.Direction.backward).item;
-          if (!item || item.element !== adapter.firstVisible.element) {
-            adapter.firstVisible = item ? item.get() : EMPTY_ITEM;
-          }
-        }
-        // the workflow can be interrupter on firstVisible change
-        if (adapter.wanted.lastVisible && !isInterrupted(workflow)) {
-          var item = viewport.getEdgeVisibleItem(items, exports.Direction.forward).item;
-          if (!item || item.element !== adapter.lastVisible.element) {
-            adapter.lastVisible = item ? item.get() : EMPTY_ITEM;
-          }
-        }
-      };
-      End.finalizeInnerLoop = function (scroller, error) {
-        var state = scroller.state, _a = scroller.state, cycle = _a.cycle, clip = _a.clip, fetch = _a.fetch;
-        var next = !!cycle.interrupter || (error ? false : End.getNext(scroller));
-        cycle.innerLoop.isInitial = false;
-        fetch.stopSimulate();
-        clip.reset(true);
-        state.endInnerLoop();
-        return next;
-      };
-      End.getNext = function (scroller) {
-        var _a = scroller.state, fetch = _a.fetch, render = _a.render;
-        if (fetch.simulate && fetch.isCheck && !render.noSize) { // Adapter.check
-          return true;
-        }
-        if (fetch.simulate && fetch.doRemove) { // Adapter.remove or Adapter.update with clip
-          return true;
-        }
-        if ( // common inner loop (App start, Scroll, Adapter.clip) accompanied by fetch
-        !fetch.simulate && ((fetch.hasNewItems && !render.noSize) || fetch.hasAnotherPack)) {
-          return true;
-        }
-        return false;
-      };
-      return End;
-    }(BaseProcessFactory(CommonProcess.end)));
-
     var Logger = /** @class */ (function () {
       function Logger(scroller, packageInfo, adapter) {
         var _this = this;
@@ -3008,19 +3038,19 @@
               return arg;
             }
             else if (Array.isArray(arg)) {
-              return "[of " + arg.length + "]";
+              return "[of ".concat(arg.length, "]");
             }
             return '{ ' + Object.keys(arg).join(', ') + ' }';
           })
             .join(', ');
-          _this.log("adapter: " + methodName + "(" + (params || '') + ")" + (add || ''));
+          _this.log("adapter: ".concat(methodName, "(").concat(params || '', ")").concat(add || ''));
         };
         var settings = scroller.settings;
         this.debug = settings.debug;
         this.immediateLog = settings.immediateLog;
         this.logTime = settings.logTime;
         this.getTime = function () {
-          return scroller.state && " // time: " + scroller.state.time;
+          return scroller.state && " // time: ".concat(scroller.state.time);
         };
         this.getStat = function () {
           var buffer = scroller.buffer, viewport = scroller.viewport;
@@ -3032,26 +3062,26 @@
             'fwd_p: ' + viewport.paddings.forward.size + ', ' +
             'default: ' + (buffer.defaultSize || 'no') + ', ' +
             'items: ' + buffer.getVisibleItemsCount() + ', ' +
-            'range: ' + (first && last ? "[" + first.$index + ".." + last.$index + "]" : 'no');
+            'range: ' + (first && last ? "[".concat(first.$index, "..").concat(last.$index, "]") : 'no');
         };
         this.getFetchRange = function () {
           var _a = scroller.state.fetch, first = _a.first.index, last = _a.last.index;
           return !Number.isNaN(first) && !Number.isNaN(last)
-            ? "[" + first + ".." + last + "]"
+            ? "[".concat(first, "..").concat(last, "]")
             : 'no';
         };
         this.getLoopId = function () { return scroller.state.cycle.loopId; };
         this.getLoopIdNext = function () { return scroller.state.cycle.loopIdNext; };
         this.getWorkflowCycleData = function () {
-          return settings.instanceIndex + "-" + scroller.state.cycle.count;
+          return "".concat(settings.instanceIndex, "-").concat(scroller.state.cycle.count);
         };
-        this.getScrollPosition = function (element) { return scroller.routines.getScrollPosition(element); };
+        this.getScrollPosition = function () { return scroller.routines.getScrollPosition(); };
         this.log(function () {
           return 'vscroll Workflow has been started, ' +
-            ("core: " + packageInfo.core.name + " v" + packageInfo.core.version + ", ") +
-            ("consumer: " + packageInfo.consumer.name + " v" + packageInfo.consumer.version + ", ") +
-            ("scroller instance: " + settings.instanceIndex + ", adapter ") +
-            (!adapter ? 'is not instantiated' : "instance: " + adapter.id);
+            "core: ".concat(packageInfo.core.name, " v").concat(packageInfo.core.version, ", ") +
+            "consumer: ".concat(packageInfo.consumer.name, " v").concat(packageInfo.consumer.version, ", ") +
+            "scroller instance: ".concat(settings.instanceIndex, ", adapter ") +
+            (!adapter ? 'is not instantiated' : "instance: ".concat(adapter.id));
         });
       }
       Logger.prototype.object = function (str, obj, stringify) {
@@ -3092,20 +3122,20 @@
             'color: #888; border: dashed #888 0; border-bottom-width: 0px',
             'color: #000; border-width: 0'
           ];
-          this.log(function () { return __spreadArray(['%cstat' + (str ? " " + str : '') + ',%c ' + _this.getStat()], __read(logStyles_1), false); });
+          this.log(function () { return __spreadArray(['%cstat' + (str ? " ".concat(str) : '') + ',%c ' + _this.getStat()], __read(logStyles_1), false); });
         }
       };
       Logger.prototype.fetch = function (str) {
         var _this = this;
         if (this.debug) {
-          var _text_1 = 'fetch interval' + (str ? " " + str : '');
+          var _text_1 = 'fetch interval' + (str ? " ".concat(str) : '');
           var logStyles_2 = ['color: #888', 'color: #000'];
-          this.log(function () { return __spreadArray(["%c" + _text_1 + ": %c" + _this.getFetchRange()], __read(logStyles_2), false); });
+          this.log(function () { return __spreadArray(["%c".concat(_text_1, ": %c").concat(_this.getFetchRange())], __read(logStyles_2), false); });
         }
       };
       Logger.prototype.prepareForLog = function (data) {
         return data instanceof Event && data.target
-          ? this.getScrollPosition(data.target)
+          ? this.getScrollPosition()
           : data;
       };
       Logger.prototype.logProcess = function (data) {
@@ -3116,13 +3146,13 @@
         // inner loop start-end log
         var loopLog = [];
         if (process === CommonProcess.init && status === ProcessStatus.next) {
-          loopLog.push("%c---=== loop " + this.getLoopIdNext() + " start");
+          loopLog.push("%c---=== loop ".concat(this.getLoopIdNext(), " start"));
         }
         else if (process === CommonProcess.end) {
-          loopLog.push("%c---=== loop " + this.getLoopId() + " done");
+          loopLog.push("%c---=== loop ".concat(this.getLoopId(), " done"));
           var parent_1 = payload && payload.process;
           if (status === ProcessStatus.next && (parent_1 !== AdapterProcess.reset && parent_1 !== AdapterProcess.reload)) {
-            loopLog[0] += ", loop " + this.getLoopIdNext() + " start";
+            loopLog[0] += ", loop ".concat(this.getLoopIdNext(), " start");
           }
         }
         if (loopLog.length) {
@@ -3133,14 +3163,14 @@
         if (start === void 0) { start = true; }
         var logData = this.getWorkflowCycleData();
         var border = start ? '1px 0 0 1px' : '0 0 1px 1px';
-        var logStyles = "color: #0000aa; border: solid #555 1px; border-width: " + border + "; margin-left: -2px";
-        this.log(function () { return ["%c   ~~~ WF Cycle " + logData + " " + (start ? 'STARTED' : 'FINALIZED') + " ~~~  ", logStyles]; });
+        var logStyles = "color: #0000aa; border: solid #555 1px; border-width: ".concat(border, "; margin-left: -2px");
+        this.log(function () { return ["%c   ~~~ WF Cycle ".concat(logData, " ").concat(start ? 'STARTED' : 'FINALIZED', " ~~~  "), logStyles]; });
       };
       Logger.prototype.logError = function (str) {
         var _this = this;
         if (this.debug) {
           var logStyles_3 = ['color: #a00;', 'color: #000'];
-          this.log(function () { return __spreadArray(['error:%c' + (str ? " " + str : '') + ("%c (loop " + _this.getLoopIdNext() + ")")], __read(logStyles_3), false); });
+          this.log(function () { return __spreadArray(['error:%c' + (str ? " ".concat(str) : '') + "%c (loop ".concat(_this.getLoopIdNext(), ")")], __read(logStyles_3), false); });
         }
       };
       Logger.prototype.log = function () {
@@ -3200,64 +3230,84 @@
     }());
 
     var Routines = /** @class */ (function () {
-      function Routines(settings) {
-        this.horizontal = settings.horizontal;
-        this.window = settings.windowViewport;
-        this.viewport = settings.viewport;
+      function Routines(element, settings, CustomRoutines) {
+        var _this = this;
+        this.element = element;
+        this.settings = {
+          viewport: settings.viewport,
+          horizontal: settings.horizontal,
+          window: settings.windowViewport
+        };
+        // provide custom overrides for IRoutines methods
+        if (CustomRoutines) {
+          var routines_1 = new CustomRoutines(element, this.settings);
+          Object.getOwnPropertyNames(Object.getPrototypeOf(routines_1))
+            .filter(function (method) {
+            return method !== 'constructor' &&
+              typeof routines_1[method] === 'function' &&
+              typeof _this[method] === 'function';
+          })
+            .forEach(function (method) {
+            return _this[method] = function () {
+              var args = [];
+              for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+              }
+              return routines_1[method].apply(_this, args);
+            };
+          });
+        }
+        // initialization
+        this.viewport = this.getViewportElement();
+        this.onInit(settings);
       }
       Routines.prototype.checkElement = function (element) {
         if (!element) {
           throw new Error('HTML element is not defined');
         }
       };
-      Routines.prototype.getHostElement = function (element) {
-        if (this.window) {
+      Routines.prototype.getViewportElement = function () {
+        if (this.settings.window) {
           return document.documentElement;
         }
-        if (this.viewport) {
-          return this.viewport;
+        if (this.settings.viewport) {
+          return this.settings.viewport;
         }
-        this.checkElement(element);
-        var parent = element.parentElement;
+        this.checkElement(this.element);
+        var parent = this.element.parentElement;
         this.checkElement(parent);
         return parent;
       };
-      Routines.prototype.getScrollEventReceiver = function (element) {
-        if (this.window) {
-          return window;
+      Routines.prototype.onInit = function (settings) {
+        if (settings.windowViewport) {
+          if ('scrollRestoration' in history) {
+            history.scrollRestoration = 'manual';
+          }
         }
-        return this.getHostElement(element);
-      };
-      Routines.prototype.setupScrollRestoration = function () {
-        if ('scrollRestoration' in history) {
-          history.scrollRestoration = 'manual';
+        if (settings.dismissOverflowAnchor) {
+          this.viewport.style.overflowAnchor = 'none';
         }
       };
-      Routines.prototype.dismissOverflowAnchor = function (element) {
-        this.checkElement(element);
-        element.style.overflowAnchor = 'none';
-      };
       Routines.prototype.findElementBySelector = function (element, selector) {
         this.checkElement(element);
         return element.querySelector(selector);
       };
-      Routines.prototype.findPaddingElement = function (element, direction) {
-        return this.findElementBySelector(element, "[data-padding-" + direction + "]");
+      Routines.prototype.findPaddingElement = function (direction) {
+        return this.findElementBySelector(this.element, "[data-padding-".concat(direction, "]"));
       };
-      Routines.prototype.findItemElement = function (element, id) {
-        return this.findElementBySelector(element, "[data-sid=\"" + id + "\"]");
+      Routines.prototype.findItemElement = function (id) {
+        return this.findElementBySelector(this.element, "[data-sid=\"".concat(id, "\"]"));
       };
-      Routines.prototype.getScrollPosition = function (element) {
-        if (this.window) {
-          return window.pageYOffset;
+      Routines.prototype.getScrollPosition = function () {
+        if (this.settings.window) {
+          return this.settings.horizontal ? window.pageXOffset : window.pageYOffset;
         }
-        this.checkElement(element);
-        return element[this.horizontal ? 'scrollLeft' : 'scrollTop'];
+        return this.viewport[this.settings.horizontal ? 'scrollLeft' : 'scrollTop'];
       };
-      Routines.prototype.setScrollPosition = function (element, value) {
+      Routines.prototype.setScrollPosition = function (value) {
         value = Math.max(0, value);
-        if (this.window) {
-          if (this.horizontal) {
+        if (this.settings.window) {
+          if (this.settings.horizontal) {
             window.scrollTo(value, window.scrollY);
           }
           else {
@@ -3265,49 +3315,62 @@
           }
           return;
         }
-        this.checkElement(element);
-        element[this.horizontal ? 'scrollLeft' : 'scrollTop'] = value;
+        this.viewport[this.settings.horizontal ? 'scrollLeft' : 'scrollTop'] = value;
       };
-      Routines.prototype.getParams = function (element, doNotBind) {
+      Routines.prototype.getElementParams = function (element) {
         this.checkElement(element);
-        if (this.window && doNotBind) {
-          var clientWidth = element.clientWidth, clientHeight = element.clientHeight, clientLeft = element.clientLeft, clientTop = element.clientTop;
-          return {
-            'height': clientHeight,
-            'width': clientWidth,
-            'top': clientTop,
-            'bottom': clientTop + clientHeight,
-            'left': clientLeft,
-            'right': clientLeft + clientWidth,
-            'x': clientLeft,
-            'y': clientTop,
-            'toJSON': function () { return null; },
-          };
-        }
         return element.getBoundingClientRect();
       };
-      Routines.prototype.getSize = function (element, doNotBind) {
-        return this.getParams(element, doNotBind)[this.horizontal ? 'width' : 'height'];
+      Routines.prototype.getWindowParams = function () {
+        var _a = this.viewport, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight, clientLeft = _a.clientLeft, clientTop = _a.clientTop;
+        return {
+          'height': clientHeight,
+          'width': clientWidth,
+          'top': clientTop,
+          'bottom': clientTop + clientHeight,
+          'left': clientLeft,
+          'right': clientLeft + clientWidth,
+          'x': clientLeft,
+          'y': clientTop,
+          'toJSON': function () { return null; },
+        };
+      };
+      Routines.prototype.getSize = function (element) {
+        return this.getElementParams(element)[this.settings.horizontal ? 'width' : 'height'];
+      };
+      Routines.prototype.getScrollerSize = function () {
+        return this.getElementParams(this.element)[this.settings.horizontal ? 'width' : 'height'];
+      };
+      Routines.prototype.getViewportSize = function () {
+        if (this.settings.window) {
+          return this.getWindowParams()[this.settings.horizontal ? 'width' : 'height'];
+        }
+        return this.getSize(this.viewport);
       };
       Routines.prototype.getSizeStyle = function (element) {
         this.checkElement(element);
-        var size = element.style[this.horizontal ? 'width' : 'height'];
+        var size = element.style[this.settings.horizontal ? 'width' : 'height'];
         return parseFloat(size) || 0;
       };
       Routines.prototype.setSizeStyle = function (element, value) {
         this.checkElement(element);
         value = Math.max(0, Math.round(value));
-        element.style[this.horizontal ? 'width' : 'height'] = value + "px";
+        element.style[this.settings.horizontal ? 'width' : 'height'] = "".concat(value, "px");
       };
-      Routines.prototype.getEdge = function (element, direction, doNotBind) {
-        var params = this.getParams(element, doNotBind);
+      Routines.prototype.getEdge = function (element, direction) {
+        var horizontal = this.settings.horizontal;
+        var params = this.getElementParams(element);
         var isFwd = direction === exports.Direction.forward;
-        return params[isFwd ? (this.horizontal ? 'right' : 'bottom') : (this.horizontal ? 'left' : 'top')];
+        return params[isFwd ? (horizontal ? 'right' : 'bottom') : (horizontal ? 'left' : 'top')];
       };
-      Routines.prototype.getEdge2 = function (element, direction, relativeElement, opposite) {
-        // vertical only ?
-        return element.offsetTop - (relativeElement ? relativeElement.scrollTop : 0) +
-          (direction === (!opposite ? exports.Direction.forward : exports.Direction.backward) ? this.getSize(element) : 0);
+      Routines.prototype.getViewportEdge = function (direction) {
+        var _a = this.settings, window = _a.window, horizontal = _a.horizontal;
+        if (window) {
+          var params = this.getWindowParams();
+          var isFwd = direction === exports.Direction.forward;
+          return params[isFwd ? (horizontal ? 'right' : 'bottom') : (horizontal ? 'left' : 'top')];
+        }
+        return this.getEdge(this.viewport, direction);
       };
       Routines.prototype.makeElementVisible = function (element) {
         this.checkElement(element);
@@ -3319,20 +3382,36 @@
         this.checkElement(element);
         element.style.display = 'none';
       };
-      Routines.prototype.getOffset = function (element) {
-        this.checkElement(element);
-        return (this.horizontal ? element.offsetLeft : element.offsetTop) || 0;
+      Routines.prototype.getOffset = function () {
+        var _this = this;
+        var get = function (element) {
+          return (_this.settings.horizontal ? element.offsetLeft : element.offsetTop) || 0;
+        };
+        return get(this.element) - (!this.settings.window ? get(this.viewport) : 0);
       };
       Routines.prototype.scrollTo = function (element, argument) {
         this.checkElement(element);
         element.scrollIntoView(argument);
       };
+      Routines.prototype.render = function (cb) {
+        var timeoutId = setTimeout(function () { return cb(); });
+        return function () { return clearTimeout(timeoutId); };
+      };
+      Routines.prototype.animate = function (cb) {
+        var animationFrameId = requestAnimationFrame(function () { return cb(); });
+        return function () { return cancelAnimationFrame(animationFrameId); };
+      };
+      Routines.prototype.onScroll = function (handler) {
+        var eventReceiver = this.settings.window ? window : this.viewport;
+        eventReceiver.addEventListener('scroll', handler);
+        return function () { return eventReceiver.removeEventListener('scroll', handler); };
+      };
       return Routines;
     }());
 
     var Padding = /** @class */ (function () {
-      function Padding(element, direction, routines) {
-        var found = routines.findPaddingElement(element, direction);
+      function Padding(direction, routines) {
+        var found = routines.findPaddingElement(direction);
         routines.checkElement(found);
         this.element = found;
         this.direction = direction;
@@ -3354,10 +3433,10 @@
       return Padding;
     }());
     var Paddings = /** @class */ (function () {
-      function Paddings(element, routines, settings) {
+      function Paddings(routines, settings) {
         this.settings = settings;
-        this.forward = new Padding(element, exports.Direction.forward, routines);
-        this.backward = new Padding(element, exports.Direction.backward, routines);
+        this.forward = new Padding(exports.Direction.forward, routines);
+        this.backward = new Padding(exports.Direction.backward, routines);
       }
       Paddings.prototype.byDirection = function (direction, opposite) {
         return direction === exports.Direction.backward
@@ -3409,27 +3488,18 @@
     }());
 
     var Viewport = /** @class */ (function () {
-      function Viewport(element, settings, routines, state, logger) {
-        this.element = element;
+      function Viewport(settings, routines, state, logger) {
         this.settings = settings;
         this.routines = routines;
         this.state = state;
         this.logger = logger;
-        this.hostElement = this.routines.getHostElement(this.element);
-        this.scrollEventReceiver = this.routines.getScrollEventReceiver(this.element);
-        if (settings.windowViewport) {
-          this.routines.setupScrollRestoration();
-        }
-        if (settings.dismissOverflowAnchor) {
-          this.routines.dismissOverflowAnchor(this.hostElement);
-        }
-        this.paddings = new Paddings(this.element, this.routines, settings);
+        this.paddings = new Paddings(this.routines, settings);
       }
       Viewport.prototype.reset = function (startIndex) {
         this.setOffset();
         this.paddings.reset(this.getSize(), startIndex, this.offset);
         this.scrollPosition = this.paddings.backward.size || 0;
-        this.state.scrollState.reset();
+        this.state.scroll.reset();
       };
       Viewport.prototype.setPosition = function (value) {
         var oldPosition = this.scrollPosition;
@@ -3437,16 +3507,16 @@
           this.logger.log(function () { return ['setting scroll position at', value, '[cancelled]']; });
           return value;
         }
-        this.routines.setScrollPosition(this.hostElement, value);
+        this.routines.setScrollPosition(value);
         var position = this.scrollPosition;
         this.logger.log(function () { return __spreadArray([
           'setting scroll position at', position
-        ], __read((position !== value ? ["(" + value + ")"] : [])), false); });
+        ], __read((position !== value ? ["(".concat(value, ")")] : [])), false); });
         return position;
       };
       Object.defineProperty(Viewport.prototype, "scrollPosition", {
         get: function () {
-          return this.routines.getScrollPosition(this.hostElement);
+          return this.routines.getScrollPosition();
         },
         set: function (value) {
           this.setPosition(value);
@@ -3455,25 +3525,25 @@
         configurable: true
       });
       Viewport.prototype.getSize = function () {
-        return this.routines.getSize(this.hostElement, true);
+        return this.routines.getViewportSize();
       };
       Viewport.prototype.getScrollableSize = function () {
-        return this.routines.getSize(this.element);
+        return this.routines.getScrollerSize();
+      };
+      Viewport.prototype.getMaxScrollPosition = function () {
+        return this.getScrollableSize() - this.getSize();
       };
       Viewport.prototype.getBufferPadding = function () {
         return this.getSize() * this.settings.padding;
       };
       Viewport.prototype.getEdge = function (direction) {
-        return this.routines.getEdge(this.hostElement, direction, true);
+        return this.routines.getViewportEdge(direction);
       };
       Viewport.prototype.setOffset = function () {
-        this.offset = this.routines.getOffset(this.element);
-        if (!this.settings.windowViewport) {
-          this.offset -= this.routines.getOffset(this.hostElement);
-        }
+        this.offset = this.routines.getOffset();
       };
       Viewport.prototype.findItemElementById = function (id) {
-        return this.routines.findItemElement(this.element, id);
+        return this.routines.findItemElement(id);
       };
       Viewport.prototype.getEdgeVisibleItem = function (items, direction) {
         var bwd = direction === exports.Direction.backward;
@@ -3687,7 +3757,7 @@
       Cache.prototype.recalculateDefaultSize = function () {
         var _this = this;
         if (this.defaultSize.recalculate(this.size)) {
-          this.logger.log(function () { return "default size has been updated: " + _this.defaultSize.get(); });
+          this.logger.log(function () { return "default size has been updated: ".concat(_this.defaultSize.get()); });
           return true;
         }
         return false;
@@ -3906,7 +3976,7 @@
           this.logger.log('no items to fill the buffer; wrong indexes');
           return false;
         }
-        this.logger.log(function () { return "going to fill the buffer with " + items.length + " item(s)"; });
+        this.logger.log(function () { return "going to fill the buffer with ".concat(items.length, " item(s)"); });
         return true;
       };
       CheckBufferCall.prototype.insertInBuffer = function (predicate, before, after) {
@@ -3930,18 +4000,18 @@
         if (index < finiteAbsMinIndex || index > finiteAbsMaxIndex) {
           this.logger.log(function () {
             return 'no items to insert virtually; ' +
-              ("selected index (" + index + ") does not match virtual area [" + finiteAbsMinIndex + ".." + finiteAbsMaxIndex + "]");
+              "selected index (".concat(index, ") does not match virtual area [").concat(finiteAbsMinIndex, "..").concat(finiteAbsMaxIndex, "]");
           });
           return false;
         }
         var before = direction === exports.Direction.backward;
         if (!(index < firstIndex + (before ? 1 : 0) || index > lastIndex - (before ? 0 : 1))) {
           this.logger.log(function () {
-            return "no items to insert virtually; selected index (" + index + ") belongs Buffer [" + firstIndex + ".." + lastIndex + "]";
+            return "no items to insert virtually; selected index (".concat(index, ") belongs Buffer [").concat(firstIndex, "..").concat(lastIndex, "]");
           });
           return false;
         }
-        this.logger.log(function () { return "going to insert " + items.length + " item(s) virtually"; });
+        this.logger.log(function () { return "going to insert ".concat(items.length, " item(s) virtually"); });
         return true;
       };
       return CheckBufferCall;
@@ -3985,15 +4055,15 @@
         var start = this.startIndexUser;
         var index = Number(newStartIndex);
         if (Number.isNaN(index)) {
-          this.logger.log(function () { return "fallback startIndex to settings.startIndex (" + start + ")"; });
+          this.logger.log(function () { return "fallback startIndex to settings.startIndex (".concat(start, ")"); });
           index = start;
         }
         if (index < min) {
-          this.logger.log(function () { return "setting startIndex to settings.minIndex (" + min + ") because " + index + " < " + min; });
+          this.logger.log(function () { return "setting startIndex to settings.minIndex (".concat(min, ") because ").concat(index, " < ").concat(min); });
           index = min;
         }
         if (index > max) {
-          this.logger.log(function () { return "setting startIndex to settings.maxIndex (" + max + ") because " + index + " > " + max; });
+          this.logger.log(function () { return "setting startIndex to settings.maxIndex (".concat(max, ") because ").concat(index, " > ").concat(max); });
           index = max;
         }
         this.startIndex = index;
@@ -4369,6 +4439,7 @@
         configurable: true
       });
       InnerLoopModel.prototype.done = function () {
+        this.isInitial = false;
         this.count++;
         this.total++;
         this.busy.set(false);
@@ -4389,27 +4460,22 @@
         this.innerLoop = new InnerLoopModel(loopCount);
         this.interrupter = null;
         this.busy = new Reactive(false);
-        this.done(cycleCount);
+        this.end(cycleCount);
       }
       Object.defineProperty(WorkflowCycleModel.prototype, "loopId", {
         get: function () {
-          return this.instanceIndex + "-" + this.count + "-" + this.innerLoop.total;
+          return "".concat(this.instanceIndex, "-").concat(this.count, "-").concat(this.innerLoop.total);
         },
         enumerable: false,
         configurable: true
       });
       Object.defineProperty(WorkflowCycleModel.prototype, "loopIdNext", {
         get: function () {
-          return this.instanceIndex + "-" + this.count + "-" + (this.innerLoop.total + 1);
+          return "".concat(this.instanceIndex, "-").concat(this.count, "-").concat(this.innerLoop.total + 1);
         },
         enumerable: false,
         configurable: true
       });
-      WorkflowCycleModel.prototype.done = function (count) {
-        this.count = count;
-        this.isInitial = false;
-        this.busy.set(false);
-      };
       WorkflowCycleModel.prototype.start = function (isInitial, initiator) {
         this.isInitial = isInitial;
         this.initiator = initiator;
@@ -4418,6 +4484,11 @@
         this.interrupter = null;
         this.busy.set(true);
       };
+      WorkflowCycleModel.prototype.end = function (count) {
+        this.count = count;
+        this.isInitial = false;
+        this.busy.set(false);
+      };
       WorkflowCycleModel.prototype.dispose = function (forever) {
         if (forever) {
           // otherwise the value will be persisted during re-instantiation
@@ -4612,16 +4683,16 @@
         this.sizeBefore = 0;
         this.sizeAfter = 0;
         this.positionBefore = 0;
-        this.renderTimer = null;
+        this.cancel = null;
       };
       return RenderModel;
     }());
 
-    var ScrollState = /** @class */ (function () {
-      function ScrollState() {
+    var ScrollModel = /** @class */ (function () {
+      function ScrollModel() {
         this.reset();
       }
-      ScrollState.prototype.reset = function () {
+      ScrollModel.prototype.reset = function () {
         this.previous = null;
         this.current = null;
         this.syntheticPosition = null;
@@ -4629,24 +4700,24 @@
         this.positionBeforeAsync = null;
         this.positionBeforeAdjust = null;
         this.positionAfterAdjust = null;
-        this.cleanupTimers();
+        this.stop();
       };
-      ScrollState.prototype.cleanupTimers = function () {
+      ScrollModel.prototype.stop = function () {
         if (this.scrollTimer) {
           clearTimeout(this.scrollTimer);
           this.scrollTimer = null;
         }
-        if (this.animationFrameId) {
-          cancelAnimationFrame(this.animationFrameId);
-          this.animationFrameId = 0;
+        if (this.cancelAnimation) {
+          this.cancelAnimation();
+          this.cancelAnimation = null;
         }
       };
-      ScrollState.prototype.hasPositionChanged = function (position) {
+      ScrollModel.prototype.hasPositionChanged = function (position) {
         var before = this.positionBeforeAdjust;
         var after = this.positionAfterAdjust;
         return before === null || before !== position || after === null || after !== position;
       };
-      return ScrollState;
+      return ScrollModel;
     }());
 
     var State = /** @class */ (function () {
@@ -4658,7 +4729,7 @@
         this.fetch = new FetchModel(settings.directionPriority);
         this.clip = new ClipModel();
         this.render = new RenderModel();
-        this.scrollState = new ScrollState();
+        this.scroll = new ScrollModel();
       }
       Object.defineProperty(State.prototype, "time", {
         get: function () {
@@ -4667,20 +4738,14 @@
         enumerable: false,
         configurable: true
       });
-      State.prototype.endInnerLoop = function () {
-        var _a = this, fetch = _a.fetch, render = _a.render, cycle = _a.cycle;
-        if (fetch.cancel) {
-          fetch.cancel();
-          fetch.cancel = null;
-        }
-        if (render.renderTimer) {
-          clearTimeout(render.renderTimer);
-          render.renderTimer = null;
-        }
-        cycle.innerLoop.done();
+      State.prototype.startWorkflowCycle = function (isInitial, initiator) {
+        this.cycle.start(isInitial, initiator);
+      };
+      State.prototype.endWorkflowCycle = function (count) {
+        this.cycle.end(count);
       };
       State.prototype.startInnerLoop = function () {
-        var _a = this, cycle = _a.cycle, scroll = _a.scrollState, fetch = _a.fetch, render = _a.render, clip = _a.clip;
+        var _a = this, cycle = _a.cycle, scroll = _a.scroll, fetch = _a.fetch, render = _a.render, clip = _a.clip;
         cycle.innerLoop.start();
         scroll.positionBeforeAsync = null;
         if (!fetch.simulate) {
@@ -4693,10 +4758,24 @@
           doRender: fetch.simulate && fetch.items.length > 0
         } : {}));
       };
+      State.prototype.endInnerLoop = function () {
+        var _a = this, fetch = _a.fetch, clip = _a.clip, render = _a.render, cycle = _a.cycle;
+        fetch.stopSimulate();
+        clip.reset(true);
+        if (fetch.cancel) {
+          fetch.cancel();
+          fetch.cancel = null;
+        }
+        if (render.cancel) {
+          render.cancel();
+          render.cancel = null;
+        }
+        cycle.innerLoop.done();
+      };
       State.prototype.dispose = function () {
+        this.scroll.stop();
         this.cycle.dispose();
         this.endInnerLoop();
-        this.scrollState.cleanupTimers();
       };
       return State;
     }());
@@ -5006,7 +5085,7 @@
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       Adapter.prototype.reset = function (options) {
         this.reloadCounter++;
-        this.logger.logAdapterMethod('reset', options, " of " + this.reloadId);
+        this.logger.logAdapterMethod('reset', options, " of ".concat(this.reloadId));
         this.workflow.call({
           process: AdapterProcess.reset,
           status: ProcessStatus.start,
@@ -5016,7 +5095,7 @@
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       Adapter.prototype.reload = function (options) {
         this.reloadCounter++;
-        this.logger.logAdapterMethod('reload', options, " of " + this.reloadId);
+        this.logger.logAdapterMethod('reload', options, " of ".concat(this.reloadId));
         this.workflow.call({
           process: AdapterProcess.reload,
           status: ProcessStatus.start,
@@ -5123,7 +5202,7 @@
           });
         }).then(function (immediate) {
           var success = reloadId === _this.reloadId;
-          _this.logger.log(function () { return !success ? "relax promise cancelled due to " + reloadId + " != " + _this.reloadId : void 0; });
+          _this.logger.log(function () { return !success ? "relax promise cancelled due to ".concat(reloadId, " != ").concat(_this.reloadId) : void 0; });
           return {
             immediate: immediate,
             success: success,
@@ -5134,7 +5213,7 @@
       Adapter.prototype.relax = function (callback) {
         var _this = this;
         var reloadId = this.reloadId;
-        this.logger.logAdapterMethod('relax', callback, " of " + reloadId);
+        this.logger.logAdapterMethod('relax', callback, " of ".concat(reloadId));
         if (!this.init) {
           return Promise.resolve(methodPreResult);
         }
@@ -5156,21 +5235,21 @@
     var instanceCount = 0;
     var Scroller = /** @class */ (function () {
       function Scroller(_a) {
-        var datasource = _a.datasource, consumer = _a.consumer, element = _a.element, workflow = _a.workflow, scroller = _a.scroller;
+        var datasource = _a.datasource, consumer = _a.consumer, element = _a.element, workflow = _a.workflow, CustomRoutines = _a.Routines, scroller = _a.scroller;
         var get = validate(datasource, DATASOURCE).params.get;
         if (!get.isValid) {
-          throw new Error(INVALID_DATASOURCE_PREFIX + " " + get.errors[0]);
+          throw new Error("".concat(INVALID_DATASOURCE_PREFIX, " ").concat(get.errors[0]));
         }
         var packageInfo = scroller ? scroller.state.packageInfo : { consumer: consumer, core: core };
-        element = scroller ? scroller.viewport.element : element;
+        element = scroller ? scroller.routines.element : element;
         workflow = scroller ? scroller.workflow : workflow;
         this.workflow = workflow;
         this.settings = new Settings(datasource.settings, datasource.devSettings, ++instanceCount);
         this.logger = new Logger(this, packageInfo, datasource.adapter);
-        this.routines = new Routines(this.settings);
+        this.routines = new Routines(element, this.settings, CustomRoutines);
         this.state = new State(packageInfo, this.settings, scroller ? scroller.state : void 0);
         this.buffer = new Buffer(this.settings, workflow.onDataChanged, this.logger);
-        this.viewport = new Viewport(element, this.settings, this.routines, this.state, this.logger);
+        this.viewport = new Viewport(this.settings, this.routines, this.state, this.logger);
         this.logger.object('vscroll settings object', this.settings, true);
         this.initDatasource(datasource, scroller);
       }
@@ -5429,14 +5508,14 @@
     var Workflow = /** @class */ (function () {
       function Workflow(_a) {
         var _this = this;
-        var element = _a.element, datasource = _a.datasource, consumer = _a.consumer, run = _a.run;
+        var element = _a.element, datasource = _a.datasource, consumer = _a.consumer, run = _a.run, Routines = _a.Routines;
         this.isInitialized = false;
         this.initTimer = null;
         this.adapterRun$ = new Reactive();
         this.cyclesDone = 0;
         this.interruptionCount = 0;
         this.errors = [];
-        this.disposeScrollEventHandler = function () { return null; };
+        this.offScroll = function () { return null; };
         this.propagateChanges = run;
         this.stateMachineMethods = {
           run: this.runProcess(),
@@ -5444,7 +5523,13 @@
           done: this.done.bind(this),
           onError: this.onError.bind(this)
         };
-        this.scroller = new Scroller({ element: element, datasource: datasource, consumer: consumer, workflow: this.getUpdater() });
+        this.scroller = new Scroller({
+          element: element,
+          datasource: datasource,
+          consumer: consumer,
+          workflow: this.getUpdater(),
+          Routines: Routines
+        });
         if (this.scroller.settings.initializeDelay) {
           this.initTimer = setTimeout(function () {
             _this.initTimer = null;
@@ -5465,16 +5550,13 @@
           status: ProcessStatus.start
         });
         // set up scroll event listener
-        var scrollEventReceiver = this.scroller.viewport.scrollEventReceiver;
+        var routines = this.scroller.routines;
         var onScrollHandler = function (event) { return _this.callWorkflow({
           process: CommonProcess.scroll,
           status: ProcessStatus.start,
           payload: { event: event }
         }); };
-        scrollEventReceiver.addEventListener('scroll', onScrollHandler);
-        this.disposeScrollEventHandler = function () {
-          return scrollEventReceiver.removeEventListener('scroll', onScrollHandler);
-        };
+        this.offScroll = routines.onScroll(onScrollHandler);
       };
       Workflow.prototype.changeItems = function (items) {
         this.propagateChanges(items);
@@ -5502,7 +5584,7 @@
             '%cfire%c'
           ], ['color: #cc7777;', 'color: #000000;'], false), [
             process,
-            "\"" + status + "\""
+            "\"".concat(status, "\"")
           ], false), __read((payload !== void 0 ? [payload] : [])), false); });
         }
         this.scroller.logger.logProcess(data);
@@ -5558,7 +5640,7 @@
           workflow.call.interrupted = true;
           this.scroller.workflow = this.getUpdater();
           this.interruptionCount++;
-          logger_1.log(function () { return "workflow had been interrupted by the " + process + " process (" + _this.interruptionCount + ")"; });
+          logger_1.log(function () { return "workflow had been interrupted by the ".concat(process, " process (").concat(_this.interruptionCount, ")"); });
         }
         if (datasource) { // Scroller re-initialization case
           this.scroller.adapter.relax(function () {
@@ -5574,7 +5656,7 @@
         var _a = this.scroller, state = _a.state, logger = _a.logger;
         this.cyclesDone++;
         logger.logCycle(false);
-        state.cycle.done(this.cyclesDone + 1);
+        state.endWorkflowCycle(this.cyclesDone + 1);
         this.finalize();
       };
       Workflow.prototype.dispose = function () {
@@ -5582,7 +5664,7 @@
         if (this.initTimer) {
           clearTimeout(this.initTimer);
         }
-        this.disposeScrollEventHandler();
+        this.offScroll();
         this.adapterRun$.dispose();
         this.scroller.dispose(true);
         Object.getOwnPropertyNames(this).forEach(function (prop) {