vscroll 1.4.1 → 1.5.0

package/dist/bundles/vscroll.esm6.js

@@ -1,6 +1,6 @@
 /**
  * vscroll (https://github.com/dhilt/vscroll) FESM2015
- * Version: 1.4.1 (2021-11-02T00:21:08.971Z)
+ * Version: 1.5.0 (2022-02-02T15:07:21.893Z)
  * Author: Denis Hilt
  * License: MIT
  */
@@ -328,7 +328,7 @@ const reactiveConfigStorage = new Map();
 
 var core = {
   name: 'vscroll',
-  version: '1.4.1'
+  version: '1.5.0'
 };
 
 let instanceCount$1 = 0;
@@ -1276,10 +1276,10 @@ const BaseAdapterProcessFactory = (process) => { var _a; return _a = class BaseA
 const initProcesses = [CommonProcess.init, AdapterProcess.reset, AdapterProcess.reload];
 class Init extends BaseProcessFactory(CommonProcess.init) {
   static run(scroller, process) {
-    const { state: { cycle }, workflow } = scroller;
+    const { state, workflow } = scroller;
     const isInitial = initProcesses.includes(process);
     scroller.logger.logCycle(true);
-    cycle.start(isInitial, process);
+    state.startWorkflowCycle(isInitial, process);
     workflow.call({
       process: Init.process,
       status: ProcessStatus.next
@@ -1298,15 +1298,15 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
     Scroll.onThrottle(scroller, position, () => Scroll.onScroll(scroller, workflow));
   }
   static onSynthetic(scroller, position) {
-    const { scrollState } = scroller.state;
-    const synthPos = scrollState.syntheticPosition;
+    const { scroll } = scroller.state;
+    const 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(() => [
-          'skipping scroll', position, `[${scrollState.syntheticFulfill ? '' : 'pre-'}synthetic]`
+          'skipping scroll', position, `[${scroll.syntheticFulfill ? '' : 'pre-'}synthetic]`
         ]);
         return true;
       }
@@ -1317,13 +1317,13 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
     return false;
   }
   static onThrottle(scroller, position, done) {
-    const { state: { scrollState }, settings: { throttle }, logger } = scroller;
-    scrollState.current = Scroll.getScrollEvent(position, scrollState.previous);
-    const { direction, time } = scrollState.current;
-    const timeDiff = scrollState.previous ? time - scrollState.previous.time : Infinity;
+    const { state: { scroll }, settings: { throttle }, logger } = scroller;
+    scroll.current = Scroll.getScrollEvent(position, scroll.previous);
+    const { direction, time } = scroll.current;
+    const timeDiff = scroll.previous ? time - scroll.previous.time : Infinity;
     const delta = throttle - timeDiff;
     const shouldDelay = isFinite(delta) && delta > 0;
-    const alreadyDelayed = !!scrollState.scrollTimer;
+    const alreadyDelayed = !!scroll.scrollTimer;
     logger.log(() => [
       direction === Direction.backward ? '\u2934' : '\u2935',
       position,
@@ -1331,17 +1331,17 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
       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(() => {
+      scroll.scrollTimer = setTimeout(() => {
         logger.log(() => {
-          const curr = Scroll.getScrollEvent(scroller.viewport.scrollPosition, scrollState.current);
+          const curr = Scroll.getScrollEvent(scroller.viewport.scrollPosition, scroll.current);
           return [
             curr.direction === Direction.backward ? '\u2934' : '\u2935',
             curr.position,
@@ -1350,7 +1350,7 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
             position
           ];
         });
-        scrollState.scrollTimer = null;
+        scroll.scrollTimer = null;
         done();
       }, delta);
     }
@@ -1369,11 +1369,11 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
     return { position, direction, time };
   }
   static onScroll(scroller, workflow) {
-    const { state: { scrollState, cycle } } = scroller;
-    scrollState.previous = Object.assign({}, scrollState.current);
-    scrollState.current = null;
+    const { state: { scroll, cycle } } = scroller;
+    scroll.previous = Object.assign({}, scroll.current);
+    scroll.current = null;
     if (cycle.busy.get()) {
-      scroller.logger.log(() => ['skipping scroll', scrollState.previous.position, '[pending]']);
+      scroller.logger.log(() => ['skipping scroll', scroll.previous.position, '[pending]']);
       return;
     }
     workflow.call({
@@ -1424,7 +1424,7 @@ class Reload extends BaseAdapterProcessFactory(AdapterProcess.reload) {
     viewport.reset(buffer.startIndex);
     const payload = {};
     if (state.cycle.busy.get()) {
-      state.scrollState.cleanupTimers();
+      state.scroll.stop();
       payload.finalize = true;
       state.cycle.interrupter = Reload.process;
     }
@@ -2183,9 +2183,9 @@ class Fetch extends BaseProcessFactory(CommonProcess.fetch) {
       }
     }
     else {
-      const { state: { scrollState, fetch }, viewport } = scroller;
-      if (scrollState.positionBeforeAsync === null) {
-        scrollState.positionBeforeAsync = viewport.scrollPosition;
+      const { state: { scroll, fetch }, viewport } = scroller;
+      if (scroll.positionBeforeAsync === null) {
+        scroll.positionBeforeAsync = viewport.scrollPosition;
       }
       fetch.cancel = () => {
         box.success = () => null;
@@ -2305,13 +2305,13 @@ class PostFetch extends BaseProcessFactory(CommonProcess.postFetch) {
 
 class Render extends BaseProcessFactory(CommonProcess.render) {
   static run(scroller) {
-    const { workflow, state: { cycle, render, scrollState }, viewport } = scroller;
+    const { workflow, state: { cycle, render, scroll }, viewport, routines } = scroller;
     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(() => {
-      render.renderTimer = null;
+    render.cancel = routines.render(() => {
+      render.cancel = null;
       if (Render.doRender(scroller)) {
         workflow.call({
           process: Render.process,
@@ -2326,7 +2326,7 @@ class Render extends BaseProcessFactory(CommonProcess.render) {
           payload: { error: 'Can\'t associate item with element' }
         });
       }
-    }, 0);
+    });
   }
   static doRender(scroller) {
     const { state: { fetch, render }, viewport, buffer, logger } = scroller;
@@ -2357,14 +2357,79 @@ class Render extends BaseProcessFactory(CommonProcess.render) {
   }
 }
 
+const isInterrupted = ({ call }) => !!call.interrupted;
+class End extends BaseProcessFactory(CommonProcess.end) {
+  static run(scroller, { error } = {}) {
+    const { workflow, state: { cycle: { interrupter } } } = scroller;
+    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;
+    }
+    const next = End.shouldContinueRun(scroller, error);
+    scroller.state.endInnerLoop();
+    workflow.call({
+      process: End.process,
+      status: next ? ProcessStatus.next : ProcessStatus.done,
+      payload: Object.assign({}, (interrupter ? { process: interrupter } : {}))
+    });
+  }
+  static calculateParams(scroller, workflow) {
+    const { adapter, viewport, buffer: { items } } = scroller;
+    if (adapter.wanted.firstVisible) {
+      const { item } = viewport.getEdgeVisibleItem(items, Direction.backward);
+      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)) {
+      const { item } = viewport.getEdgeVisibleItem(items, Direction.forward);
+      if (!item || item.element !== adapter.lastVisible.element) {
+        adapter.lastVisible = item ? item.get() : EMPTY_ITEM;
+      }
+    }
+  }
+  static shouldContinueRun(scroller, error) {
+    const { cycle, fetch, render } = scroller.state;
+    // 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;
+  }
+}
+
 class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
   static run(scroller) {
-    const { workflow, viewport, state: { scrollState } } = scroller;
-    scrollState.positionBeforeAdjust = viewport.scrollPosition;
+    const { workflow, viewport, state: { scroll } } = scroller;
+    scroll.positionBeforeAdjust = viewport.scrollPosition;
     Adjust.setPaddings(scroller);
-    scrollState.positionAfterAdjust = viewport.scrollPosition;
+    scroll.positionAfterAdjust = viewport.scrollPosition;
     // scroll position adjustments
     const 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, () => workflow.call({
       process: Adjust.process,
@@ -2395,7 +2460,8 @@ class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
     }
     // lack of items case
     const bufferSize = viewport.getScrollableSize() - forward.size - backward.size;
-    const viewportSizeDiff = viewport.getSize() - (bwdSize + bufferSize + fwdSize);
+    const scrollSize = bwdSize + bufferSize + fwdSize;
+    const viewportSizeDiff = viewport.getSize() - scrollSize;
     if (viewportSizeDiff > 0) {
       if (inverse) {
         bwdSize += viewportSizeDiff;
@@ -2410,7 +2476,7 @@ class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
     scroller.logger.stat('after paddings adjustments');
   }
   static calculatePosition(scroller) {
-    const { viewport, buffer, state: { fetch, render, scrollState } } = scroller;
+    const { viewport, buffer, state: { fetch, render, scroll } } = scroller;
     let 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)) {
@@ -2433,8 +2499,8 @@ class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
       });
     }
     // slow fetch/render case
-    if (scrollState.positionBeforeAsync !== null) {
-      const diff = render.positionBefore - scrollState.positionBeforeAsync;
+    if (scroll.positionBeforeAsync !== null) {
+      const diff = render.positionBefore - scroll.positionBeforeAsync;
       if (diff !== 0) {
         scroller.logger.log(`shift position due to fetch-render difference (${diff})`);
         position += diff;
@@ -2446,22 +2512,47 @@ class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
     }
     return Math.round(position);
   }
+  static setAdditionalForwardPadding(scroller, position) {
+    const { viewport, buffer, state: { cycle } } = scroller;
+    if (!cycle.isInitial || !End.shouldContinueRun(scroller, null)) {
+      return;
+    }
+    const diff = position - viewport.getMaxScrollPosition();
+    if (diff <= 0) {
+      return;
+    }
+    const last = buffer.getLastVisibleItem();
+    if (!last) {
+      return;
+    }
+    let size = 0;
+    let index = last.$index + 1;
+    while (size <= diff && index <= buffer.absMaxIndex) {
+      size += buffer.getSizeByIndex(index++);
+    }
+    const 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})`);
+    }
+  }
   static setPosition(scroller, position, done) {
-    const { state: { scrollState }, viewport } = scroller;
-    if (!scrollState.hasPositionChanged(position)) {
+    const { state: { scroll }, viewport, routines } = scroller;
+    if (!scroll.hasPositionChanged(position)) {
       return done();
     }
-    scrollState.syntheticPosition = position;
-    scrollState.syntheticFulfill = false;
-    scrollState.animationFrameId = requestAnimationFrame(() => {
-      const inertiaDiff = scrollState.positionAfterAdjust - viewport.scrollPosition;
+    scroll.syntheticPosition = position;
+    scroll.syntheticFulfill = false;
+    scroll.cancelAnimation = routines.animate(() => {
+      scroll.cancelAnimation = null;
+      const inertiaDiff = scroll.positionAfterAdjust - viewport.scrollPosition;
       let 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();
@@ -2601,67 +2692,6 @@ class Clip extends BaseProcessFactory(CommonProcess.clip) {
   }
 }
 
-const isInterrupted = ({ call }) => !!call.interrupted;
-class End extends BaseProcessFactory(CommonProcess.end) {
-  static run(scroller, { error } = {}) {
-    const { workflow, state: { cycle: { interrupter } } } = scroller;
-    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;
-    }
-    const next = End.finalizeInnerLoop(scroller, error);
-    workflow.call({
-      process: End.process,
-      status: next ? ProcessStatus.next : ProcessStatus.done,
-      payload: Object.assign({}, (interrupter ? { process: interrupter } : {}))
-    });
-  }
-  static calculateParams(scroller, workflow) {
-    const { adapter, viewport, buffer: { items } } = scroller;
-    if (adapter.wanted.firstVisible) {
-      const { item } = viewport.getEdgeVisibleItem(items, Direction.backward);
-      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)) {
-      const { item } = viewport.getEdgeVisibleItem(items, Direction.forward);
-      if (!item || item.element !== adapter.lastVisible.element) {
-        adapter.lastVisible = item ? item.get() : EMPTY_ITEM;
-      }
-    }
-  }
-  static finalizeInnerLoop(scroller, error) {
-    const { state, state: { cycle, clip, fetch } } = scroller;
-    const next = !!cycle.interrupter || (error ? false : End.getNext(scroller));
-    cycle.innerLoop.isInitial = false;
-    fetch.stopSimulate();
-    clip.reset(true);
-    state.endInnerLoop();
-    return next;
-  }
-  static getNext(scroller) {
-    const { state: { fetch, render } } = scroller;
-    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;
-  }
-}
-
 class Logger {
   constructor(scroller, packageInfo, adapter) {
     this.logs = [];
@@ -2711,7 +2741,7 @@ class Logger {
     this.getLoopId = () => scroller.state.cycle.loopId;
     this.getLoopIdNext = () => scroller.state.cycle.loopIdNext;
     this.getWorkflowCycleData = () => `${settings.instanceIndex}-${scroller.state.cycle.count}`;
-    this.getScrollPosition = (element) => scroller.routines.getScrollPosition(element);
+    this.getScrollPosition = () => scroller.routines.getScrollPosition();
     this.log(() => 'vscroll Workflow has been started, ' +
       `core: ${packageInfo.core.name} v${packageInfo.core.version}, ` +
       `consumer: ${packageInfo.consumer.name} v${packageInfo.consumer.version}, ` +
@@ -2767,7 +2797,7 @@ class Logger {
   }
   prepareForLog(data) {
     return data instanceof Event && data.target
-      ? this.getScrollPosition(data.target)
+      ? this.getScrollPosition()
       : data;
   }
   logProcess(data) {
@@ -2849,64 +2879,73 @@ class Logger {
 }
 
 class Routines {
-  constructor(settings) {
-    this.horizontal = settings.horizontal;
-    this.window = settings.windowViewport;
-    this.viewport = settings.viewport;
+  constructor(element, settings, CustomRoutines) {
+    this.element = element;
+    this.settings = {
+      viewport: settings.viewport,
+      horizontal: settings.horizontal,
+      window: settings.windowViewport
+    };
+    // provide custom overrides for IRoutines methods
+    if (CustomRoutines) {
+      const routines = new CustomRoutines(element, this.settings);
+      Object.getOwnPropertyNames(Object.getPrototypeOf(routines))
+        .filter(method => method !== 'constructor' &&
+        typeof routines[method] === 'function' &&
+        typeof this[method] === 'function')
+        .forEach(method => this[method] = (...args) => routines[method].apply(this, args));
+    }
+    // initialization
+    this.viewport = this.getViewportElement();
+    this.onInit(settings);
   }
   checkElement(element) {
     if (!element) {
       throw new Error('HTML element is not defined');
     }
   }
-  getHostElement(element) {
-    if (this.window) {
+  getViewportElement() {
+    if (this.settings.window) {
       return document.documentElement;
     }
-    if (this.viewport) {
-      return this.viewport;
+    if (this.settings.viewport) {
+      return this.settings.viewport;
     }
-    this.checkElement(element);
-    const parent = element.parentElement;
+    this.checkElement(this.element);
+    const parent = this.element.parentElement;
     this.checkElement(parent);
     return parent;
   }
-  getScrollEventReceiver(element) {
-    if (this.window) {
-      return window;
+  onInit(settings) {
+    if (settings.windowViewport) {
+      if ('scrollRestoration' in history) {
+        history.scrollRestoration = 'manual';
+      }
     }
-    return this.getHostElement(element);
-  }
-  setupScrollRestoration() {
-    if ('scrollRestoration' in history) {
-      history.scrollRestoration = 'manual';
+    if (settings.dismissOverflowAnchor) {
+      this.viewport.style.overflowAnchor = 'none';
     }
   }
-  dismissOverflowAnchor(element) {
-    this.checkElement(element);
-    element.style.overflowAnchor = 'none';
-  }
   findElementBySelector(element, selector) {
     this.checkElement(element);
     return element.querySelector(selector);
   }
-  findPaddingElement(element, direction) {
-    return this.findElementBySelector(element, `[data-padding-${direction}]`);
+  findPaddingElement(direction) {
+    return this.findElementBySelector(this.element, `[data-padding-${direction}]`);
   }
-  findItemElement(element, id) {
-    return this.findElementBySelector(element, `[data-sid="${id}"]`);
+  findItemElement(id) {
+    return this.findElementBySelector(this.element, `[data-sid="${id}"]`);
   }
-  getScrollPosition(element) {
-    if (this.window) {
-      return window.pageYOffset;
+  getScrollPosition() {
+    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'];
   }
-  setScrollPosition(element, value) {
+  setScrollPosition(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 {
@@ -2914,49 +2953,62 @@ class Routines {
       }
       return;
     }
-    this.checkElement(element);
-    element[this.horizontal ? 'scrollLeft' : 'scrollTop'] = value;
+    this.viewport[this.settings.horizontal ? 'scrollLeft' : 'scrollTop'] = value;
   }
-  getParams(element, doNotBind) {
+  getElementParams(element) {
     this.checkElement(element);
-    if (this.window && doNotBind) {
-      const { clientWidth, clientHeight, clientLeft, clientTop } = element;
-      return {
-        'height': clientHeight,
-        'width': clientWidth,
-        'top': clientTop,
-        'bottom': clientTop + clientHeight,
-        'left': clientLeft,
-        'right': clientLeft + clientWidth,
-        'x': clientLeft,
-        'y': clientTop,
-        'toJSON': () => null,
-      };
-    }
     return element.getBoundingClientRect();
   }
-  getSize(element, doNotBind) {
-    return this.getParams(element, doNotBind)[this.horizontal ? 'width' : 'height'];
+  getWindowParams() {
+    const { clientWidth, clientHeight, clientLeft, clientTop } = this.viewport;
+    return {
+      'height': clientHeight,
+      'width': clientWidth,
+      'top': clientTop,
+      'bottom': clientTop + clientHeight,
+      'left': clientLeft,
+      'right': clientLeft + clientWidth,
+      'x': clientLeft,
+      'y': clientTop,
+      'toJSON': () => null,
+    };
+  }
+  getSize(element) {
+    return this.getElementParams(element)[this.settings.horizontal ? 'width' : 'height'];
+  }
+  getScrollerSize() {
+    return this.getElementParams(this.element)[this.settings.horizontal ? 'width' : 'height'];
+  }
+  getViewportSize() {
+    if (this.settings.window) {
+      return this.getWindowParams()[this.settings.horizontal ? 'width' : 'height'];
+    }
+    return this.getSize(this.viewport);
   }
   getSizeStyle(element) {
     this.checkElement(element);
-    const size = element.style[this.horizontal ? 'width' : 'height'];
+    const size = element.style[this.settings.horizontal ? 'width' : 'height'];
     return parseFloat(size) || 0;
   }
   setSizeStyle(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'] = `${value}px`;
   }
-  getEdge(element, direction, doNotBind) {
-    const params = this.getParams(element, doNotBind);
+  getEdge(element, direction) {
+    const { horizontal } = this.settings;
+    const params = this.getElementParams(element);
     const isFwd = direction === Direction.forward;
-    return params[isFwd ? (this.horizontal ? 'right' : 'bottom') : (this.horizontal ? 'left' : 'top')];
+    return params[isFwd ? (horizontal ? 'right' : 'bottom') : (horizontal ? 'left' : 'top')];
   }
-  getEdge2(element, direction, relativeElement, opposite) {
-    // vertical only ?
-    return element.offsetTop - (relativeElement ? relativeElement.scrollTop : 0) +
-      (direction === (!opposite ? Direction.forward : Direction.backward) ? this.getSize(element) : 0);
+  getViewportEdge(direction) {
+    const { window, horizontal } = this.settings;
+    if (window) {
+      const params = this.getWindowParams();
+      const isFwd = direction === Direction.forward;
+      return params[isFwd ? (horizontal ? 'right' : 'bottom') : (horizontal ? 'left' : 'top')];
+    }
+    return this.getEdge(this.viewport, direction);
   }
   makeElementVisible(element) {
     this.checkElement(element);
@@ -2968,19 +3020,32 @@ class Routines {
     this.checkElement(element);
     element.style.display = 'none';
   }
-  getOffset(element) {
-    this.checkElement(element);
-    return (this.horizontal ? element.offsetLeft : element.offsetTop) || 0;
+  getOffset() {
+    const get = (element) => (this.settings.horizontal ? element.offsetLeft : element.offsetTop) || 0;
+    return get(this.element) - (!this.settings.window ? get(this.viewport) : 0);
   }
   scrollTo(element, argument) {
     this.checkElement(element);
     element.scrollIntoView(argument);
   }
+  render(cb) {
+    const timeoutId = setTimeout(() => cb());
+    return () => clearTimeout(timeoutId);
+  }
+  animate(cb) {
+    const animationFrameId = requestAnimationFrame(() => cb());
+    return () => cancelAnimationFrame(animationFrameId);
+  }
+  onScroll(handler) {
+    const eventReceiver = this.settings.window ? window : this.viewport;
+    eventReceiver.addEventListener('scroll', handler);
+    return () => eventReceiver.removeEventListener('scroll', handler);
+  }
 }
 
 class Padding {
-  constructor(element, direction, routines) {
-    const found = routines.findPaddingElement(element, direction);
+  constructor(direction, routines) {
+    const found = routines.findPaddingElement(direction);
     routines.checkElement(found);
     this.element = found;
     this.direction = direction;
@@ -2997,10 +3062,10 @@ class Padding {
   }
 }
 class Paddings {
-  constructor(element, routines, settings) {
+  constructor(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);
   }
   byDirection(direction, opposite) {
     return direction === Direction.backward
@@ -3051,27 +3116,18 @@ class Paddings {
 }
 
 class Viewport {
-  constructor(element, settings, routines, state, logger) {
-    this.element = element;
+  constructor(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);
   }
   reset(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();
   }
   setPosition(value) {
     const oldPosition = this.scrollPosition;
@@ -3079,7 +3135,7 @@ class Viewport {
       this.logger.log(() => ['setting scroll position at', value, '[cancelled]']);
       return value;
     }
-    this.routines.setScrollPosition(this.hostElement, value);
+    this.routines.setScrollPosition(value);
     const position = this.scrollPosition;
     this.logger.log(() => [
       'setting scroll position at', position, ...(position !== value ? [`(${value})`] : [])
@@ -3087,31 +3143,31 @@ class Viewport {
     return position;
   }
   get scrollPosition() {
-    return this.routines.getScrollPosition(this.hostElement);
+    return this.routines.getScrollPosition();
   }
   set scrollPosition(value) {
     this.setPosition(value);
   }
   getSize() {
-    return this.routines.getSize(this.hostElement, true);
+    return this.routines.getViewportSize();
   }
   getScrollableSize() {
-    return this.routines.getSize(this.element);
+    return this.routines.getScrollerSize();
+  }
+  getMaxScrollPosition() {
+    return this.getScrollableSize() - this.getSize();
   }
   getBufferPadding() {
     return this.getSize() * this.settings.padding;
   }
   getEdge(direction) {
-    return this.routines.getEdge(this.hostElement, direction, true);
+    return this.routines.getViewportEdge(direction);
   }
   setOffset() {
-    this.offset = this.routines.getOffset(this.element);
-    if (!this.settings.windowViewport) {
-      this.offset -= this.routines.getOffset(this.hostElement);
-    }
+    this.offset = this.routines.getOffset();
   }
   findItemElementById(id) {
-    return this.routines.findItemElement(this.element, id);
+    return this.routines.findItemElement(id);
   }
   getEdgeVisibleItem(items, direction) {
     const bwd = direction === Direction.backward;
@@ -3903,6 +3959,7 @@ class InnerLoopModel {
     return this.count === 0;
   }
   done() {
+    this.isInitial = false;
     this.count++;
     this.total++;
     this.busy.set(false);
@@ -3922,7 +3979,7 @@ class WorkflowCycleModel {
     this.innerLoop = new InnerLoopModel(loopCount);
     this.interrupter = null;
     this.busy = new Reactive(false);
-    this.done(cycleCount);
+    this.end(cycleCount);
   }
   get loopId() {
     return `${this.instanceIndex}-${this.count}-${this.innerLoop.total}`;
@@ -3930,11 +3987,6 @@ class WorkflowCycleModel {
   get loopIdNext() {
     return `${this.instanceIndex}-${this.count}-${this.innerLoop.total + 1}`;
   }
-  done(count) {
-    this.count = count;
-    this.isInitial = false;
-    this.busy.set(false);
-  }
   start(isInitial, initiator) {
     this.isInitial = isInitial;
     this.initiator = initiator;
@@ -3943,6 +3995,11 @@ class WorkflowCycleModel {
     this.interrupter = null;
     this.busy.set(true);
   }
+  end(count) {
+    this.count = count;
+    this.isInitial = false;
+    this.busy.set(false);
+  }
   dispose(forever) {
     if (forever) {
       // otherwise the value will be persisted during re-instantiation
@@ -4102,11 +4159,11 @@ class RenderModel {
     this.sizeBefore = 0;
     this.sizeAfter = 0;
     this.positionBefore = 0;
-    this.renderTimer = null;
+    this.cancel = null;
   }
 }
 
-class ScrollState {
+class ScrollModel {
   constructor() {
     this.reset();
   }
@@ -4118,16 +4175,16 @@ class ScrollState {
     this.positionBeforeAsync = null;
     this.positionBeforeAdjust = null;
     this.positionAfterAdjust = null;
-    this.cleanupTimers();
+    this.stop();
   }
-  cleanupTimers() {
+  stop() {
     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;
     }
   }
   hasPositionChanged(position) {
@@ -4146,25 +4203,19 @@ class State {
     this.fetch = new FetchModel(settings.directionPriority);
     this.clip = new ClipModel();
     this.render = new RenderModel();
-    this.scrollState = new ScrollState();
+    this.scroll = new ScrollModel();
   }
   get time() {
     return Number(new Date()) - this.initTime;
   }
-  endInnerLoop() {
-    const { fetch, render, cycle } = this;
-    if (fetch.cancel) {
-      fetch.cancel();
-      fetch.cancel = null;
-    }
-    if (render.renderTimer) {
-      clearTimeout(render.renderTimer);
-      render.renderTimer = null;
-    }
-    cycle.innerLoop.done();
+  startWorkflowCycle(isInitial, initiator) {
+    this.cycle.start(isInitial, initiator);
+  }
+  endWorkflowCycle(count) {
+    this.cycle.end(count);
   }
   startInnerLoop() {
-    const { cycle, scrollState: scroll, fetch, render, clip } = this;
+    const { cycle, scroll: scroll, fetch, render, clip } = this;
     cycle.innerLoop.start();
     scroll.positionBeforeAsync = null;
     if (!fetch.simulate) {
@@ -4177,10 +4228,24 @@ class State {
       doRender: fetch.simulate && fetch.items.length > 0
     } : {}));
   }
+  endInnerLoop() {
+    const { fetch, clip, render, cycle } = this;
+    fetch.stopSimulate();
+    clip.reset(true);
+    if (fetch.cancel) {
+      fetch.cancel();
+      fetch.cancel = null;
+    }
+    if (render.cancel) {
+      render.cancel();
+      render.cancel = null;
+    }
+    cycle.innerLoop.done();
+  }
   dispose() {
+    this.scroll.stop();
     this.cycle.dispose();
     this.endInnerLoop();
-    this.scrollState.cleanupTimers();
   }
 }
 
@@ -4591,21 +4656,21 @@ class Adapter {
 const INVALID_DATASOURCE_PREFIX = 'Invalid datasource:';
 let instanceCount = 0;
 class Scroller {
-  constructor({ datasource, consumer, element, workflow, scroller }) {
+  constructor({ datasource, consumer, element, workflow, Routines: CustomRoutines, scroller }) {
     const { params: { get } } = validate(datasource, DATASOURCE);
     if (!get.isValid) {
       throw new Error(`${INVALID_DATASOURCE_PREFIX} ${get.errors[0]}`);
     }
     const packageInfo = scroller ? scroller.state.packageInfo : { consumer, 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);
   }
@@ -4859,14 +4924,14 @@ const runStateMachine = ({ input: { process, status, payload = {} }, methods: {
 };
 
 class Workflow {
-  constructor({ element, datasource, consumer, run }) {
+  constructor({ element, datasource, consumer, run, Routines }) {
     this.isInitialized = false;
     this.initTimer = null;
     this.adapterRun$ = new Reactive();
     this.cyclesDone = 0;
     this.interruptionCount = 0;
     this.errors = [];
-    this.disposeScrollEventHandler = () => null;
+    this.offScroll = () => null;
     this.propagateChanges = run;
     this.stateMachineMethods = {
       run: this.runProcess(),
@@ -4874,7 +4939,9 @@ class Workflow {
       done: this.done.bind(this),
       onError: this.onError.bind(this)
     };
-    this.scroller = new Scroller({ element, datasource, consumer, workflow: this.getUpdater() });
+    this.scroller = new Scroller({
+      element, datasource, consumer, workflow: this.getUpdater(), Routines
+    });
     if (this.scroller.settings.initializeDelay) {
       this.initTimer = setTimeout(() => {
         this.initTimer = null;
@@ -4894,14 +4961,13 @@ class Workflow {
       status: ProcessStatus.start
     });
     // set up scroll event listener
-    const { scrollEventReceiver } = this.scroller.viewport;
+    const { routines } = this.scroller;
     const onScrollHandler = event => this.callWorkflow({
       process: CommonProcess.scroll,
       status: ProcessStatus.start,
       payload: { event }
     });
-    scrollEventReceiver.addEventListener('scroll', onScrollHandler);
-    this.disposeScrollEventHandler = () => scrollEventReceiver.removeEventListener('scroll', onScrollHandler);
+    this.offScroll = routines.onScroll(onScrollHandler);
   }
   changeItems(items) {
     this.propagateChanges(items);
@@ -4987,14 +5053,14 @@ class Workflow {
     const { state, logger } = this.scroller;
     this.cyclesDone++;
     logger.logCycle(false);
-    state.cycle.done(this.cyclesDone + 1);
+    state.endWorkflowCycle(this.cyclesDone + 1);
     this.finalize();
   }
   dispose() {
     if (this.initTimer) {
       clearTimeout(this.initTimer);
     }
-    this.disposeScrollEventHandler();
+    this.offScroll();
     this.adapterRun$.dispose();
     this.scroller.dispose(true);
     Object.getOwnPropertyNames(this).forEach(prop => {