vscroll 1.4.0-beta.2 → 1.4.3

package/dist/bundles/vscroll.esm5.js

@@ -1,6 +1,6 @@
 /**
  * vscroll (https://github.com/dhilt/vscroll) FESM5
- * Version: 1.4.0-beta.2 (2021-09-29T18:28:00.088Z)
+ * Version: 1.4.3 (2021-11-30T02:54:00.541Z)
  * Author: Denis Hilt
  * License: MIT
  */
@@ -343,7 +343,7 @@ var reactiveConfigStorage = new Map();
 
 var core = {
   name: 'vscroll',
-  version: '1.4.0-beta.2'
+  version: '1.4.3'
 };
 
 var instanceCount$1 = 0;
@@ -731,7 +731,7 @@ var ValidatedData = /** @class */ (function () {
   };
   ValidatedData.prototype.setValidity = function () {
     var _this = this;
-    this.errors = Object.keys(this.params).reduce(function (acc, key) { return __spreadArray(__spreadArray([], __read(acc)), __read(_this.params[key].errors)); }, []);
+    this.errors = Object.keys(this.params).reduce(function (acc, key) { return __spreadArray(__spreadArray([], __read(acc), false), __read(_this.params[key].errors), false); }, []);
     this.isValid = !this.errors.length;
   };
   ValidatedData.prototype.setCommonError = function (error) {
@@ -760,7 +760,7 @@ var ValidatedData = /** @class */ (function () {
 var runValidator = function (current, validator, context) {
   var value = current.value, errors = current.errors;
   var result = validator.method(value, context);
-  var _errors = __spreadArray(__spreadArray([], __read(errors)), __read(result.errors));
+  var _errors = __spreadArray(__spreadArray([], __read(errors), false), __read(result.errors), false);
   return {
     value: result.value,
     isSet: result.isSet,
@@ -1350,10 +1350,10 @@ var Init = /** @class */ (function (_super) {
     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
@@ -1379,16 +1379,16 @@ var Scroll = /** @class */ (function (_super) {
     });
   };
   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]"
+          "[" + (scroll.syntheticFulfill ? '' : 'pre-') + "synthetic]"
         ]; });
         return true;
       }
@@ -1399,13 +1399,13 @@ var Scroll = /** @class */ (function (_super) {
     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 === Direction.backward ? '\u2934' : '\u2935',
       position,
@@ -1413,17 +1413,17 @@ var Scroll = /** @class */ (function (_super) {
       shouldDelay ? (alreadyDelayed ? 'delayed' : "/ " + 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 === Direction.backward ? '\u2934' : '\u2935',
             curr.position,
@@ -1432,7 +1432,7 @@ var Scroll = /** @class */ (function (_super) {
             position
           ];
         });
-        scrollState.scrollTimer = null;
+        scroll.scrollTimer = null;
         done();
       }, delta);
     }
@@ -1451,11 +1451,11 @@ var Scroll = /** @class */ (function (_super) {
     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({
@@ -1516,7 +1516,7 @@ var Reload = /** @class */ (function (_super) {
     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;
     }
@@ -1581,6 +1581,10 @@ var Item = /** @class */ (function () {
       this.size = this.routines.getSize(this.element);
     }
   };
+  Item.prototype.makeVisible = function () {
+    this.routines.makeElementVisible(this.element);
+    this.invisible = false;
+  };
   Item.prototype.hide = function () {
     if (this.element) {
       this.routines.hideElement(this.element);
@@ -1656,52 +1660,70 @@ var Update = /** @class */ (function (_super) {
   return Update;
 }(BaseAdapterProcessFactory(AdapterProcess.update)));
 
-var Append = /** @class */ (function (_super) {
-  __extends(Append, _super);
-  function Append() {
+var Insert = /** @class */ (function (_super) {
+  __extends(Insert, _super);
+  function Insert() {
     return _super !== null && _super.apply(this, arguments) || this;
   }
-  Append.run = function (scroller, _a) {
-    var process = _a.process, options = _a.options;
-    var params = Append.parseInput(scroller, options, false, process).params;
+  Insert.run = function (scroller, options) {
+    var params = Insert.parseInput(scroller, options).params;
     if (!params) {
       return;
     }
-    var shouldAppend = Append.doAppend(scroller, params, process !== AdapterProcess.append);
+    var shouldInsert = Insert.doInsert(scroller, params);
     scroller.workflow.call({
-      process: Append.process,
-      status: shouldAppend ? ProcessStatus.next : ProcessStatus.done
+      process: Insert.process,
+      status: shouldInsert ? ProcessStatus.next : ProcessStatus.done
     });
   };
-  Append.doAppend = function (scroller, params, prepend) {
-    var buffer = scroller.buffer;
-    var items = params.items, bof = params.bof, eof = params.eof, increase = params.increase, decrease = params.decrease;
-    var fixRight = (prepend && !increase) || (!prepend && !!decrease);
-    var result = false;
-    if ((prepend && bof && !buffer.bof.get()) || (!prepend && eof && !buffer.eof.get())) {
-      result = Append.doVirtual(scroller, items, prepend, fixRight);
-    }
-    else {
-      if (!buffer.size) {
-        result = Append.doEmpty(scroller, items, prepend, fixRight);
-      }
-      else {
-        result = Append.doRegular(scroller, items, prepend, fixRight);
+  Insert.doInsert = function (scroller, params) {
+    if (!Insert.insertEmpty(scroller, params)) {
+      if (!Insert.insertInBuffer(scroller, params)) {
+        if (!Insert.insertVirtually(scroller, params)) {
+          return false;
+        }
       }
     }
-    return result;
+    return true;
   };
-  Append.doVirtual = function (scroller, items, prepend, fixRight) {
-    var buffer = scroller.buffer, logger = scroller.logger, viewport = scroller.viewport, fetch = scroller.state.fetch;
-    var absIndexToken = fixRight ? 'absMinIndex' : 'absMaxIndex';
-    if (!isFinite(buffer[absIndexToken])) {
+  Insert.insertEmpty = function (scroller, params) {
+    var buffer = scroller.buffer, routines = scroller.routines, fetch = scroller.state.fetch;
+    if (buffer.size) {
       return false;
     }
-    if (prepend) {
-      buffer.prependVirtually(items.length, fixRight);
+    var beforeIndex = params.beforeIndex, afterIndex = params.afterIndex, items = params.items, decrease = params.decrease;
+    if (!buffer.fillEmpty(items, beforeIndex, afterIndex, !!decrease, function (index, data) { return new Item(index, data, routines); })) {
+      return false;
     }
-    else {
-      buffer.appendVirtually(items.length, fixRight);
+    fetch.fill(buffer.items, buffer.startIndex);
+    return true;
+  };
+  Insert.insertInBuffer = function (scroller, params) {
+    var before = params.before, after = params.after, beforeIndex = params.beforeIndex, afterIndex = params.afterIndex, items = params.items, decrease = params.decrease;
+    var indexToInsert = scroller.buffer.getIndexToInsert(before || after, beforeIndex, afterIndex);
+    if (isNaN(indexToInsert)) {
+      return false;
+    }
+    var isBackward = Number.isInteger(beforeIndex) || before;
+    var updateOptions = {
+      predicate: function (_a) {
+        var $index = _a.$index, data = _a.data;
+        if (indexToInsert === $index) {
+          return isBackward ? __spreadArray(__spreadArray([], __read(items), false), [data], false) : __spreadArray([data], __read(items), false);
+        }
+        return true;
+      },
+      fixRight: decrease
+    };
+    return Update.doUpdate(scroller, updateOptions);
+  };
+  Insert.insertVirtually = function (scroller, params) {
+    var beforeIndex = params.beforeIndex, afterIndex = params.afterIndex, items = params.items, decrease = params.decrease;
+    var buffer = scroller.buffer, fetch = scroller.state.fetch, viewport = scroller.viewport;
+    var direction = Number.isInteger(beforeIndex) ? Direction.backward : Direction.forward;
+    var indexToInsert = (direction === Direction.backward ? beforeIndex : afterIndex);
+    if (!buffer.insertVirtually(items, indexToInsert, direction, !!decrease)) {
+      return false;
     }
     var _a = viewport.getEdgeVisibleItem(buffer.items, Direction.backward), index = _a.index, diff = _a.diff;
     fetch.firstVisible.index = index;
@@ -1709,47 +1731,47 @@ var Append = /** @class */ (function (_super) {
       fetch.simulate = true;
       fetch.firstVisible.delta = -buffer.getSizeByIndex(index) + diff;
     }
-    logger.log(function () { return "buffer." + [absIndexToken] + " value is set to " + buffer[absIndexToken]; });
-    logger.stat("after virtual " + (prepend ? 'prepend' : 'append'));
     return true;
   };
-  Append.doEmpty = function (scroller, items, prepend, fixRight) {
-    var buffer = scroller.buffer, fetch = scroller.state.fetch;
-    var absIndexToken = fixRight ? 'absMinIndex' : 'absMaxIndex';
-    var shift = prepend && !fixRight ? items.length - 1 : (!prepend && fixRight ? 1 - items.length : 0);
-    var bufferLimit = buffer[absIndexToken] + (fixRight ? -1 : 1) * (items.length - 1);
-    var newItems = [];
-    var startIndex = buffer[prepend ? 'minIndex' : 'maxIndex'];
-    var index = startIndex;
-    items.forEach(function (item) {
-      var newItem = new Item(index + shift, item, scroller.routines);
-      Array.prototype[prepend ? 'unshift' : 'push'].call(newItems, newItem);
-      index += (prepend ? -1 : 1);
+  return Insert;
+}(BaseAdapterProcessFactory(AdapterProcess.insert)));
+
+var Append = /** @class */ (function (_super) {
+  __extends(Append, _super);
+  function Append() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  Append.run = function (scroller, _a) {
+    var process = _a.process, options = _a.options;
+    var params = Append.parseInput(scroller, options, false, process).params;
+    if (!params) {
+      return;
+    }
+    var shouldAppend = Append.doAppend(scroller, process, params);
+    scroller.workflow.call({
+      process: Append.process,
+      status: shouldAppend ? ProcessStatus.next : ProcessStatus.done
     });
-    if (bufferLimit !== buffer[absIndexToken]) {
-      buffer[absIndexToken] = bufferLimit;
-      scroller.logger.log(function () { return "buffer." + absIndexToken + " value is set to " + buffer[absIndexToken]; });
-    }
-    (prepend ? fetch.prepend : fetch.append).call(fetch, newItems);
-    buffer.setItems(newItems);
-    fetch.first.indexBuffer = !isNaN(buffer.firstIndex) ? buffer.firstIndex : index;
-    fetch.last.indexBuffer = !isNaN(buffer.lastIndex) ? buffer.lastIndex : index;
-    fetch.firstVisible.index = startIndex;
-    return true;
   };
-  Append.doRegular = function (scroller, items, prepend, fixRight) {
-    var index = scroller.buffer[prepend ? 'firstIndex' : 'lastIndex'];
-    var updateOptions = {
-      predicate: function (_a) {
-        var $index = _a.$index, data = _a.data;
-        if ($index === index) {
-          return prepend ? __spreadArray(__spreadArray([], __read(items.reverse())), [data]) : __spreadArray([data], __read(items));
-        }
-        return true;
-      },
-      fixRight: fixRight
-    };
-    return Update.doUpdate(scroller, updateOptions);
+  Append.doAppend = function (scroller, process, params) {
+    var bof = params.bof, eof = params.eof, increase = params.increase, decrease = params.decrease;
+    var buffer = scroller.buffer;
+    var prepend = process === AdapterProcess.prepend;
+    var opposite = prepend ? !increase : decrease;
+    var beforeIndex, afterIndex, items = params.items;
+    if (prepend) {
+      beforeIndex = (bof ? buffer.absMinIndex : buffer.minIndex) + (!buffer.size ? 1 : 0);
+      items = __spreadArray([], __read(items), false).reverse();
+    }
+    else {
+      afterIndex = (eof ? buffer.absMaxIndex : buffer.maxIndex) - (!buffer.size && !opposite ? 1 : 0);
+    }
+    return Insert.doInsert(scroller, {
+      items: items,
+      beforeIndex: beforeIndex,
+      afterIndex: afterIndex,
+      decrease: opposite
+    });
   };
   return Append;
 }(BaseAdapterProcessFactory(AdapterProcess.append)));
@@ -1842,7 +1864,7 @@ var Remove = /** @class */ (function (_super) {
         (!!indexes && indexes.includes(item.$index));
     };
     var indexesToRemove = scroller.buffer.items.reduce(function (acc, item) {
-      return newPredicate(item) ? __spreadArray(__spreadArray([], __read(acc)), [item.$index]) : acc;
+      return newPredicate(item) ? __spreadArray(__spreadArray([], __read(acc), false), [item.$index], false) : acc;
     }, []);
     var updateOptions = {
       predicate: function (item) { return !newPredicate(item); },
@@ -1918,82 +1940,6 @@ var UserClip = /** @class */ (function (_super) {
   return UserClip;
 }(BaseAdapterProcessFactory(AdapterProcess.clip)));
 
-var Insert = /** @class */ (function (_super) {
-  __extends(Insert, _super);
-  function Insert() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-  Insert.run = function (scroller, options) {
-    var params = Insert.parseInput(scroller, options).params;
-    if (!params) {
-      return;
-    }
-    var shouldInsert = Insert.doInsert(scroller, params);
-    scroller.workflow.call({
-      process: Insert.process,
-      status: shouldInsert ? ProcessStatus.next : ProcessStatus.done
-    });
-  };
-  Insert.doInsert = function (scroller, params) {
-    if (!Insert.insertEmpty(scroller, params)) {
-      if (!Insert.insertInBuffer(scroller, params)) {
-        if (!Insert.insertVirtually(scroller, params)) {
-          return false;
-        }
-      }
-    }
-    return true;
-  };
-  Insert.insertEmpty = function (scroller, params) {
-    var buffer = scroller.buffer, routines = scroller.routines, fetch = scroller.state.fetch;
-    if (buffer.size) {
-      return false;
-    }
-    var beforeIndex = params.beforeIndex, afterIndex = params.afterIndex, items = params.items, decrease = params.decrease;
-    if (!buffer.fillEmpty(items, beforeIndex, afterIndex, !!decrease, function (index, data) { return new Item(index, data, routines); })) {
-      return false;
-    }
-    fetch.fill(buffer.items, buffer.startIndex);
-    return true;
-  };
-  Insert.insertInBuffer = function (scroller, params) {
-    var before = params.before, after = params.after, beforeIndex = params.beforeIndex, afterIndex = params.afterIndex, items = params.items, decrease = params.decrease;
-    var indexToInsert = scroller.buffer.getIndexToInsert(before || after, beforeIndex, afterIndex);
-    if (isNaN(indexToInsert)) {
-      return false;
-    }
-    var isBackward = Number.isInteger(beforeIndex) || before;
-    var updateOptions = {
-      predicate: function (_a) {
-        var $index = _a.$index, data = _a.data;
-        if (indexToInsert === $index) {
-          return isBackward ? __spreadArray(__spreadArray([], __read(items)), [data]) : __spreadArray([data], __read(items));
-        }
-        return true;
-      },
-      fixRight: decrease
-    };
-    return Update.doUpdate(scroller, updateOptions);
-  };
-  Insert.insertVirtually = function (scroller, params) {
-    var beforeIndex = params.beforeIndex, afterIndex = params.afterIndex, items = params.items, decrease = params.decrease;
-    var buffer = scroller.buffer, fetch = scroller.state.fetch, viewport = scroller.viewport;
-    var direction = Number.isInteger(beforeIndex) ? Direction.backward : Direction.forward;
-    var indexToInsert = (direction === Direction.backward ? beforeIndex : afterIndex);
-    if (!buffer.insertVirtually(items, indexToInsert, direction, !!decrease)) {
-      return false;
-    }
-    var _a = viewport.getEdgeVisibleItem(buffer.items, Direction.backward), index = _a.index, diff = _a.diff;
-    fetch.firstVisible.index = index;
-    if (!isNaN(index)) {
-      fetch.simulate = true;
-      fetch.firstVisible.delta = -buffer.getSizeByIndex(index) + diff;
-    }
-    return true;
-  };
-  return Insert;
-}(BaseAdapterProcessFactory(AdapterProcess.insert)));
-
 var Replace = /** @class */ (function (_super) {
   __extends(Replace, _super);
   function Replace() {
@@ -2110,7 +2056,7 @@ var Fix = /** @class */ (function (_super) {
     buffer.items.forEach(function (item) { return value(item.get(), updater); });
     if (updateReference) {
       logger.log(function () { return 'update Buffer.items reference'; });
-      buffer.items = __spreadArray([], __read(buffer.items));
+      buffer.items = __spreadArray([], __read(buffer.items), false);
     }
   };
   Fix.scrollToItem = function (scroller, value, options) {
@@ -2195,7 +2141,7 @@ var PreFetch = /** @class */ (function (_super) {
     }
     scroller.logger.log(function () { return __spreadArray([
       "start delta is " + startDelta
-    ], __read((offset ? [" (+" + offset + " offset)"] : []))); });
+    ], __read((offset ? [" (+" + offset + " offset)"] : [])), false); });
     return startDelta;
   };
   PreFetch.setFirstIndex = function (scroller) {
@@ -2425,9 +2371,9 @@ var Fetch = /** @class */ (function (_super) {
       }
     }
     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; };
@@ -2559,13 +2505,13 @@ var Render = /** @class */ (function (_super) {
     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,
@@ -2580,7 +2526,7 @@ var Render = /** @class */ (function (_super) {
           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;
@@ -2601,15 +2547,12 @@ var Render = /** @class */ (function (_super) {
   };
   Render.processElement = function (scroller, item) {
     var viewport = scroller.viewport, buffer = scroller.buffer;
-    var element = viewport.element.querySelector("[data-sid=\"" + item.nodeId + "\"]");
+    var element = viewport.findItemElementById(item.nodeId);
     if (!element) {
       return false;
     }
     item.element = element;
-    item.element.style.left = '';
-    item.element.style.top = '';
-    item.element.style.position = '';
-    item.invisible = false;
+    item.makeVisible();
     item.setSize(buffer.getSizeByIndex(item.$index));
     buffer.cacheItem(item);
     return true;
@@ -2617,18 +2560,92 @@ var Render = /** @class */ (function (_super) {
   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, 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, 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({
@@ -2661,7 +2678,8 @@ var Adjust = /** @class */ (function (_super) {
     }
     // 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;
@@ -2678,7 +2696,7 @@ var Adjust = /** @class */ (function (_super) {
     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)) {
@@ -2701,8 +2719,8 @@ var Adjust = /** @class */ (function (_super) {
       });
     }
     // 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 + ")");
         position += diff;
@@ -2714,22 +2732,47 @@ var Adjust = /** @class */ (function (_super) {
     }
     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 (" + diff + " -> " + 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;
+        scroll.syntheticPosition = position;
         diffLog = " (-" + inertiaDiff + ")";
       }
-      scrollState.syntheticFulfill = true;
+      scroll.syntheticFulfill = true;
       viewport.scrollPosition = position;
       scroller.logger.stat('after scroll adjustment' + diffLog);
       done();
@@ -2886,76 +2929,6 @@ var Clip = /** @class */ (function (_super) {
   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, 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, 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;
@@ -3057,7 +3030,7 @@ var Logger = /** @class */ (function () {
         '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)); });
+      this.log(function () { return __spreadArray(['%cstat' + (str ? " " + str : '') + ',%c ' + _this.getStat()], __read(logStyles_1), false); });
     }
   };
   Logger.prototype.fetch = function (str) {
@@ -3065,7 +3038,7 @@ var Logger = /** @class */ (function () {
     if (this.debug) {
       var _text_1 = 'fetch interval' + (str ? " " + str : '');
       var logStyles_2 = ['color: #888', 'color: #000'];
-      this.log(function () { return __spreadArray(["%c" + _text_1 + ": %c" + _this.getFetchRange()], __read(logStyles_2)); });
+      this.log(function () { return __spreadArray(["%c" + _text_1 + ": %c" + _this.getFetchRange()], __read(logStyles_2), false); });
     }
   };
   Logger.prototype.prepareForLog = function (data) {
@@ -3091,7 +3064,7 @@ var Logger = /** @class */ (function () {
       }
     }
     if (loopLog.length) {
-      this.log(function () { return __spreadArray(__spreadArray([], __read(loopLog)), ['color: #006600;']); });
+      this.log(function () { return __spreadArray(__spreadArray([], __read(loopLog), false), ['color: #006600;'], false); });
     }
   };
   Logger.prototype.logCycle = function (start) {
@@ -3105,7 +3078,7 @@ var Logger = /** @class */ (function () {
     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)); });
+      this.log(function () { return __spreadArray(['error:%c' + (str ? " " + str : '') + ("%c (loop " + _this.getLoopIdNext() + ")")], __read(logStyles_3), false); });
     }
   };
   Logger.prototype.log = function () {
@@ -3125,7 +3098,7 @@ var Logger = /** @class */ (function () {
         return;
       }
       if (this.logTime) {
-        args = __spreadArray(__spreadArray([], __read(args)), [this.getTime()]);
+        args = __spreadArray(__spreadArray([], __read(args), false), [this.getTime()], false);
       }
       args = args.map(function (arg) { return _this.prepareForLog(arg); });
       if (this.immediateLog) {
@@ -3168,12 +3141,50 @@ var Routines = /** @class */ (function () {
   function Routines(settings) {
     this.horizontal = settings.horizontal;
     this.window = settings.windowViewport;
+    this.viewport = settings.viewport;
   }
   Routines.prototype.checkElement = function (element) {
     if (!element) {
       throw new Error('HTML element is not defined');
     }
   };
+  Routines.prototype.getHostElement = function (element) {
+    if (this.window) {
+      return document.documentElement;
+    }
+    if (this.viewport) {
+      return this.viewport;
+    }
+    this.checkElement(element);
+    var parent = element.parentElement;
+    this.checkElement(parent);
+    return parent;
+  };
+  Routines.prototype.getScrollEventReceiver = function (element) {
+    if (this.window) {
+      return window;
+    }
+    return this.getHostElement(element);
+  };
+  Routines.prototype.setupScrollRestoration = function () {
+    if ('scrollRestoration' in history) {
+      history.scrollRestoration = 'manual';
+    }
+  };
+  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.findItemElement = function (element, id) {
+    return this.findElementBySelector(element, "[data-sid=\"" + id + "\"]");
+  };
   Routines.prototype.getScrollPosition = function (element) {
     if (this.window) {
       return window.pageYOffset;
@@ -3236,6 +3247,12 @@ var Routines = /** @class */ (function () {
     return element.offsetTop - (relativeElement ? relativeElement.scrollTop : 0) +
       (direction === (!opposite ? Direction.forward : Direction.backward) ? this.getSize(element) : 0);
   };
+  Routines.prototype.makeElementVisible = function (element) {
+    this.checkElement(element);
+    element.style.left = '';
+    element.style.top = '';
+    element.style.position = '';
+  };
   Routines.prototype.hideElement = function (element) {
     this.checkElement(element);
     element.style.display = 'none';
@@ -3248,12 +3265,26 @@ var Routines = /** @class */ (function () {
     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 (element, handler) {
+    element.addEventListener('scroll', handler);
+    return function () { return element.removeEventListener('scroll', handler); };
+  };
   return Routines;
 }());
 
 var Padding = /** @class */ (function () {
   function Padding(element, direction, routines) {
-    this.element = element.querySelector("[data-padding-" + direction + "]");
+    var found = routines.findPaddingElement(element, direction);
+    routines.checkElement(found);
+    this.element = found;
     this.direction = direction;
     this.routines = routines;
   }
@@ -3334,28 +3365,21 @@ var Viewport = /** @class */ (function () {
     this.routines = routines;
     this.state = state;
     this.logger = logger;
-    this.disabled = false;
+    this.hostElement = this.routines.getHostElement(this.element);
+    this.scrollEventReceiver = this.routines.getScrollEventReceiver(this.element);
     if (settings.windowViewport) {
-      this.hostElement = document.documentElement;
-      this.scrollEventReceiver = window;
-    }
-    else {
-      this.hostElement = settings.viewport || this.element.parentElement;
-      this.scrollEventReceiver = this.hostElement;
-    }
-    this.paddings = new Paddings(this.element, this.routines, settings);
-    if (settings.windowViewport && 'scrollRestoration' in history) {
-      history.scrollRestoration = 'manual';
+      this.routines.setupScrollRestoration();
     }
     if (settings.dismissOverflowAnchor) {
-      this.hostElement.style.overflowAnchor = 'none';
+      this.routines.dismissOverflowAnchor(this.hostElement);
     }
+    this.paddings = new Paddings(this.element, 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;
@@ -3367,7 +3391,7 @@ var Viewport = /** @class */ (function () {
     var position = this.scrollPosition;
     this.logger.log(function () { return __spreadArray([
       'setting scroll position at', position
-    ], __read((position !== value ? ["(" + value + ")"] : []))); });
+    ], __read((position !== value ? ["(" + value + ")"] : [])), false); });
     return position;
   };
   Object.defineProperty(Viewport.prototype, "scrollPosition", {
@@ -3380,29 +3404,15 @@ var Viewport = /** @class */ (function () {
     enumerable: false,
     configurable: true
   });
-  Viewport.prototype.disableScrollForOneLoop = function () {
-    var _this = this;
-    if (this.disabled) {
-      return;
-    }
-    var style = this.hostElement.style;
-    if (style.overflowY === 'hidden') {
-      return;
-    }
-    this.disabled = true;
-    var overflow = style.overflowY;
-    setTimeout(function () {
-      _this.disabled = false;
-      style.overflowY = overflow;
-    });
-    style.overflowY = 'hidden';
-  };
   Viewport.prototype.getSize = function () {
     return this.routines.getSize(this.hostElement, true);
   };
   Viewport.prototype.getScrollableSize = function () {
     return this.routines.getSize(this.element);
   };
+  Viewport.prototype.getMaxScrollPosition = function () {
+    return this.getScrollableSize() - this.getSize();
+  };
   Viewport.prototype.getBufferPadding = function () {
     return this.getSize() * this.settings.padding;
   };
@@ -3415,6 +3425,9 @@ var Viewport = /** @class */ (function () {
       this.offset -= this.routines.getOffset(this.hostElement);
     }
   };
+  Viewport.prototype.findItemElementById = function (id) {
+    return this.routines.findItemElement(this.element, id);
+  };
   Viewport.prototype.getEdgeVisibleItem = function (items, direction) {
     var bwd = direction === Direction.backward;
     var opposite = bwd ? Direction.forward : Direction.backward;
@@ -3517,7 +3530,7 @@ var DefaultSize = /** @class */ (function () {
         return _this.sizeMap.set(size, Math.max((_this.sizeMap.get(size) || 0) - 1, 0));
       });
     }
-    var sorted = __spreadArray([], __read(this.sizeMap.entries())).sort(function (a, b) { return b[1] - a[1]; });
+    var sorted = __spreadArray([], __read(this.sizeMap.entries()), false).sort(function (a, b) { return b[1] - a[1]; });
     var mostFrequentCount = sorted[0][1];
     var listEqual = sorted.filter(function (i) { return i[1] === mostFrequentCount; });
     if (listEqual.length > 1 && listEqual.find(function (i) { return i[0] === oldFrequentSizeCount; })) {
@@ -4065,13 +4078,13 @@ var Buffer = /** @class */ (function () {
   };
   Buffer.prototype.setItems = function (items) {
     if (!this.items.length) {
-      this.items = __spreadArray([], __read(items));
+      this.items = __spreadArray([], __read(items), false);
     }
     else if (this.items[0].$index > items[items.length - 1].$index) {
-      this.items = __spreadArray(__spreadArray([], __read(items)), __read(this.items));
+      this.items = __spreadArray(__spreadArray([], __read(items), false), __read(this.items), false);
     }
     else if (items[0].$index > this.items[this.items.length - 1].$index) {
-      this.items = __spreadArray(__spreadArray([], __read(this.items)), __read(items));
+      this.items = __spreadArray(__spreadArray([], __read(this.items), false), __read(items), false);
     }
     else {
       return false;
@@ -4102,22 +4115,6 @@ var Buffer = /** @class */ (function () {
       this.startIndex = this.absMinIndex;
     }
   };
-  Buffer.prototype.appendVirtually = function (count, fixRight) {
-    if (fixRight) {
-      this.items.forEach(function (item) { return item.updateIndex(item.$index - count); });
-      this.cache.shiftIndexes(-count);
-      this.items = __spreadArray([], __read(this.items));
-    }
-    this.shiftExtremum(count, fixRight);
-  };
-  Buffer.prototype.prependVirtually = function (count, fixRight) {
-    if (!fixRight) {
-      this.items.forEach(function (item) { return item.updateIndex(item.$index + count); });
-      this.cache.shiftIndexes(count);
-      this.items = __spreadArray([], __read(this.items));
-    }
-    this.shiftExtremum(count, fixRight);
-  };
   Buffer.prototype.insertVirtually = function (items, index, direction, fixRight) {
     if (!this.checkCall.insertVirtual(items, index, direction)) {
       return false;
@@ -4132,7 +4129,7 @@ var Buffer = /** @class */ (function () {
     if (shift) {
       this.items.forEach(function (item) { return item.updateIndex(item.$index + shift); });
       this.cache.insertItems(items, index, direction, fixRight);
-      this.items = __spreadArray([], __read(this.items));
+      this.items = __spreadArray([], __read(this.items), false);
     }
     this.shiftExtremum(items.length, fixRight);
     return true;
@@ -4154,7 +4151,7 @@ var Buffer = /** @class */ (function () {
     }
     this.shiftExtremum(-indexes.length, fixRight);
     if (shifted) {
-      this.items = __spreadArray([], __read(this.items));
+      this.items = __spreadArray([], __read(this.items), false);
     }
     this.cache.removeItems(indexes, fixRight);
   };
@@ -4216,7 +4213,7 @@ var Buffer = /** @class */ (function () {
       }
       var toRemove_1 = true;
       var newItems = [];
-      (fixRight ? __spreadArray([], __read(result)).reverse() : result).forEach(function (data, i) {
+      (fixRight ? __spreadArray([], __read(result), false).reverse() : result).forEach(function (data, i) {
         var newItem;
         if (item.data === data) {
           if (indexToTrack === item.$index) {
@@ -4233,7 +4230,7 @@ var Buffer = /** @class */ (function () {
         updateArray.call(newItems, newItem);
       });
       item.toRemove = toRemove_1;
-      updateArray.call.apply(updateArray, __spreadArray([items], __read(newItems)));
+      updateArray.call.apply(updateArray, __spreadArray([items], __read(newItems), false));
       index += diff * result.length;
       if (result.length > 1) {
         this_2.shiftExtremum(result.length - 1, fixRight);
@@ -4325,6 +4322,7 @@ var InnerLoopModel = /** @class */ (function () {
     configurable: true
   });
   InnerLoopModel.prototype.done = function () {
+    this.isInitial = false;
     this.count++;
     this.total++;
     this.busy.set(false);
@@ -4345,7 +4343,7 @@ var WorkflowCycleModel = /** @class */ (function () {
     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 () {
@@ -4361,11 +4359,6 @@ var WorkflowCycleModel = /** @class */ (function () {
     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;
@@ -4374,6 +4367,11 @@ var WorkflowCycleModel = /** @class */ (function () {
     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
@@ -4516,18 +4514,6 @@ var FetchModel = /** @class */ (function () {
     this.firstVisible.index = start;
     this.firstVisible.delta = 0;
   };
-  FetchModel.prototype.append = function (items) {
-    this.startSimulate(items);
-    this.last.index = items[items.length - 1].$index;
-    this.first.index = items[0].$index;
-    this.direction = Direction.forward;
-  };
-  FetchModel.prototype.prepend = function (items) {
-    this.startSimulate(items);
-    this.last.index = items[0].$index;
-    this.first.index = items[items.length - 1].$index;
-    this.direction = Direction.backward;
-  };
   FetchModel.prototype.check = function (items) {
     this.startSimulate(items);
     this.last.index = items[0].$index;
@@ -4580,16 +4566,16 @@ var RenderModel = /** @class */ (function () {
     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;
@@ -4597,24 +4583,24 @@ var ScrollState = /** @class */ (function () {
     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 () {
@@ -4626,7 +4612,7 @@ var State = /** @class */ (function () {
     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 () {
@@ -4635,20 +4621,14 @@ var State = /** @class */ (function () {
     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) {
@@ -4661,10 +4641,24 @@ var State = /** @class */ (function () {
       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;
 }());
@@ -5404,7 +5398,7 @@ var Workflow = /** @class */ (function () {
     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(),
@@ -5433,16 +5427,13 @@ var Workflow = /** @class */ (function () {
       status: ProcessStatus.start
     });
     // set up scroll event listener
-    var scrollEventReceiver = this.scroller.viewport.scrollEventReceiver;
+    var _a = this.scroller, scrollEventReceiver = _a.viewport.scrollEventReceiver, routines = _a.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(scrollEventReceiver, onScrollHandler);
   };
   Workflow.prototype.changeItems = function (items) {
     this.propagateChanges(items);
@@ -5468,10 +5459,10 @@ var Workflow = /** @class */ (function () {
     if (this.scroller.settings.logProcessRun) {
       this.scroller.logger.log(function () { return __spreadArray(__spreadArray(__spreadArray([
         '%cfire%c'
-      ], ['color: #cc7777;', 'color: #000000;']), [
+      ], ['color: #cc7777;', 'color: #000000;'], false), [
         process,
         "\"" + status + "\""
-      ]), __read((payload !== void 0 ? [payload] : []))); });
+      ], false), __read((payload !== void 0 ? [payload] : [])), false); });
     }
     this.scroller.logger.logProcess(data);
     if (process === CommonProcess.end) {
@@ -5494,11 +5485,11 @@ var Workflow = /** @class */ (function () {
         if (_this.scroller.settings.logProcessRun) {
           _this.scroller.logger.log(function () { return __spreadArray(__spreadArray(__spreadArray([
             '%crun%c'
-          ], ['color: #333399;', 'color: #000000;']), [
+          ], ['color: #333399;', 'color: #000000;'], false), [
             process || name
-          ]), __read(args)); });
+          ], false), __read(args), false); });
         }
-        run.apply(void 0, __spreadArray([_this.scroller], __read(args)));
+        run.apply(void 0, __spreadArray([_this.scroller], __read(args), false));
       };
     };
   };
@@ -5542,7 +5533,7 @@ var Workflow = /** @class */ (function () {
     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 () {
@@ -5550,7 +5541,7 @@ var Workflow = /** @class */ (function () {
     if (this.initTimer) {
       clearTimeout(this.initTimer);
     }
-    this.disposeScrollEventHandler();
+    this.offScroll();
     this.adapterRun$.dispose();
     this.scroller.dispose(true);
     Object.getOwnPropertyNames(this).forEach(function (prop) {