vscroll 1.4.3 → 1.5.1

package/dist/bundles/vscroll.esm5.js

@@ -1,6 +1,6 @@
 /**
  * vscroll (https://github.com/dhilt/vscroll) FESM5
- * Version: 1.4.3 (2021-11-30T02:54:00.541Z)
+ * Version: 1.5.1 (2022-09-02T19:54:19.461Z)
  * Author: Denis Hilt
  * License: MIT
  */
@@ -343,7 +343,7 @@ var reactiveConfigStorage = new Map();
 
 var core = {
   name: 'vscroll',
-  version: '1.4.3'
+  version: '1.5.1'
 };
 
 var instanceCount$1 = 0;
@@ -452,7 +452,7 @@ var ValidatorType;
   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 !== '')
@@ -617,7 +617,7 @@ var onOneOf = function (tokens, must) { return function (value, context) {
       }
       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) {
@@ -742,9 +742,9 @@ var ValidatedData = /** @class */ (function () {
   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;
@@ -1332,7 +1332,7 @@ var BaseAdapterProcessFactory = function (process) { var _a; return _a = /** @cl
           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") }
           });
         }
       }
@@ -1388,7 +1388,7 @@ var Scroll = /** @class */ (function (_super) {
       if (!scroll.syntheticFulfill || synthPos === position) {
         scroller.logger.log(function () { return [
           'skipping scroll', position,
-          "[" + (scroll.syntheticFulfill ? '' : 'pre-') + "synthetic]"
+          "[".concat(scroll.syntheticFulfill ? '' : 'pre-', "synthetic]")
         ]; });
         return true;
       }
@@ -1410,7 +1410,7 @@ var Scroll = /** @class */ (function (_super) {
       direction === 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 (scroll.scrollTimer) {
@@ -1906,7 +1906,7 @@ var Remove = /** @class */ (function (_super) {
       }
     }
     // 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);
@@ -2140,8 +2140,8 @@ var PreFetch = /** @class */ (function (_super) {
       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) {
@@ -2312,17 +2312,17 @@ var PreFetch = /** @class */ (function (_super) {
         direction_1 = fetch.last.index < buffer.items[0].$index ? Direction.backward : 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;
@@ -2340,8 +2340,8 @@ var Fetch = /** @class */ (function (_super) {
     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({
@@ -2688,7 +2688,7 @@ var Adjust = /** @class */ (function (_super) {
         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;
@@ -2700,7 +2700,7 @@ var Adjust = /** @class */ (function (_super) {
     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
@@ -2722,7 +2722,7 @@ var Adjust = /** @class */ (function (_super) {
     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;
       }
     }
@@ -2753,7 +2753,7 @@ var Adjust = /** @class */ (function (_super) {
     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 + ")");
+      scroller.logger.log("increase fwd padding due to lack of items (".concat(diff, " -> ").concat(shift, ")"));
     }
   };
   Adjust.setPosition = function (scroller, position, done) {
@@ -2770,7 +2770,7 @@ var Adjust = /** @class */ (function (_super) {
       if (inertiaDiff > 0) {
         position -= inertiaDiff;
         scroll.syntheticPosition = position;
-        diffLog = " (-" + inertiaDiff + ")";
+        diffLog = " (-".concat(inertiaDiff, ")");
       }
       scroll.syntheticFulfill = true;
       viewport.scrollPosition = position;
@@ -2804,8 +2804,8 @@ var PreClip = /** @class */ (function (_super) {
     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, Direction.backward, firstIndex);
@@ -2889,7 +2889,7 @@ var Clip = /** @class */ (function (_super) {
     var _a;
     var buffer = scroller.buffer, paddings = scroller.viewport.paddings, clip = scroller.state.clip, logger = scroller.logger;
     var size = (_a = {}, _a[Direction.backward] = 0, _a[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;
@@ -2917,10 +2917,10 @@ var Clip = /** @class */ (function (_super) {
       });
       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';
     });
@@ -2946,19 +2946,19 @@ var Logger = /** @class */ (function () {
           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;
@@ -2970,26 +2970,26 @@ var Logger = /** @class */ (function () {
         '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) {
@@ -3030,20 +3030,20 @@ 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), 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) {
@@ -3054,13 +3054,13 @@ var Logger = /** @class */ (function () {
     // 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) {
@@ -3071,14 +3071,14 @@ var Logger = /** @class */ (function () {
     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 () {
@@ -3138,64 +3138,85 @@ var Logger = /** @class */ (function () {
 }());
 
 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 self_1 = this;
+      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 self_1[method] === 'function';
+      })
+        .forEach(function (method) {
+        return self_1[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 {
@@ -3203,49 +3224,62 @@ var Routines = /** @class */ (function () {
       }
       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 === 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 ? Direction.forward : 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 === 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);
@@ -3257,9 +3291,12 @@ var Routines = /** @class */ (function () {
     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);
@@ -3273,16 +3310,17 @@ var Routines = /** @class */ (function () {
     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); };
+  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;
@@ -3304,10 +3342,10 @@ var Padding = /** @class */ (function () {
   return Padding;
 }());
 var Paddings = /** @class */ (function () {
-  function Paddings(element, routines, settings) {
+  function Paddings(routines, settings) {
     this.settings = settings;
-    this.forward = new Padding(element, Direction.forward, routines);
-    this.backward = new Padding(element, Direction.backward, routines);
+    this.forward = new Padding(Direction.forward, routines);
+    this.backward = new Padding(Direction.backward, routines);
   }
   Paddings.prototype.byDirection = function (direction, opposite) {
     return direction === Direction.backward
@@ -3359,21 +3397,12 @@ var Paddings = /** @class */ (function () {
 }());
 
 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();
@@ -3387,16 +3416,16 @@ var Viewport = /** @class */ (function () {
       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);
@@ -3405,10 +3434,10 @@ var Viewport = /** @class */ (function () {
     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();
@@ -3417,16 +3446,13 @@ var Viewport = /** @class */ (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 === Direction.backward;
@@ -3640,7 +3666,7 @@ var Cache = /** @class */ (function () {
   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;
@@ -3859,7 +3885,7 @@ var CheckBufferCall = /** @class */ (function () {
       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) {
@@ -3883,18 +3909,18 @@ var CheckBufferCall = /** @class */ (function () {
     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 === 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;
@@ -3938,15 +3964,15 @@ var Buffer = /** @class */ (function () {
     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;
@@ -4282,15 +4308,11 @@ var Buffer = /** @class */ (function () {
   };
   Buffer.prototype.getFirstVisibleItem = function () {
     var index = this.getFirstVisibleItemIndex();
-    if (index >= 0) {
-      return this.items[index];
-    }
+    return index >= 0 ? this.items[index] : void 0;
   };
   Buffer.prototype.getLastVisibleItem = function () {
     var index = this.getLastVisibleItemIndex();
-    if (index >= 0) {
-      return this.items[index];
-    }
+    return index >= 0 ? this.items[index] : void 0;
   };
   Buffer.prototype.getEdgeVisibleItem = function (direction, opposite) {
     return direction === (!opposite ? Direction.forward : Direction.backward) ?
@@ -4347,14 +4369,14 @@ var WorkflowCycleModel = /** @class */ (function () {
   }
   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
@@ -4968,7 +4990,7 @@ var Adapter = /** @class */ (function () {
   // 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,
@@ -4978,7 +5000,7 @@ var Adapter = /** @class */ (function () {
   // 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,
@@ -5085,7 +5107,7 @@ var Adapter = /** @class */ (function () {
       });
     }).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,
@@ -5096,7 +5118,7 @@ var Adapter = /** @class */ (function () {
   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);
     }
@@ -5118,21 +5140,21 @@ var INVALID_DATASOURCE_PREFIX = 'Invalid datasource:';
 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);
   }
@@ -5391,7 +5413,7 @@ var runStateMachine = function (_a) {
 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();
@@ -5406,7 +5428,13 @@ var Workflow = /** @class */ (function () {
       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;
@@ -5427,13 +5455,13 @@ var Workflow = /** @class */ (function () {
       status: ProcessStatus.start
     });
     // set up scroll event listener
-    var _a = this.scroller, scrollEventReceiver = _a.viewport.scrollEventReceiver, routines = _a.routines;
+    var routines = this.scroller.routines;
     var onScrollHandler = function (event) { return _this.callWorkflow({
       process: CommonProcess.scroll,
       status: ProcessStatus.start,
       payload: { event: event }
     }); };
-    this.offScroll = routines.onScroll(scrollEventReceiver, onScrollHandler);
+    this.offScroll = routines.onScroll(onScrollHandler);
   };
   Workflow.prototype.changeItems = function (items) {
     this.propagateChanges(items);
@@ -5461,7 +5489,7 @@ var Workflow = /** @class */ (function () {
         '%cfire%c'
       ], ['color: #cc7777;', 'color: #000000;'], false), [
         process,
-        "\"" + status + "\""
+        "\"".concat(status, "\"")
       ], false), __read((payload !== void 0 ? [payload] : [])), false); });
     }
     this.scroller.logger.logProcess(data);
@@ -5517,7 +5545,7 @@ var Workflow = /** @class */ (function () {
       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 () {