@tanstack/virtual-core - npm Package Compare versions

Comparing version 3.0.0-beta.35 to 3.0.0-beta.36

build/lib/index.d.ts

@@ -78,2 +78,3 @@ export * from './utils';
     private isScrollingTimeoutId;
+    private scrollToIndexTimeoutId;
     measurementsCache: VirtualItem[];
@@ -87,3 +88,2 @@ private itemSizeCache;
     private measureElementCache;
-    private pendingScrollToIndexCallback;
     private getResizeObserver;
@@ -114,5 +114,3 @@ range: {
     scrollToIndex: (index: number, { align, behavior }?: ScrollToIndexOptions) => void;
-    scrollBy: (adjustments: number, options?: {
-        behavior: ScrollBehavior;
-    }) => void;
+    scrollBy: (delta: number, { behavior }?: ScrollToOffsetOptions) => void;
     getTotalSize: () => number;
@@ -119,0 +117,0 @@ private _scrollToOffset;

build/lib/index.esm.js

@@ -154,2 +154,3 @@ /**
   this.isScrollingTimeoutId = null;
+  this.scrollToIndexTimeoutId = null;
   this.measurementsCache = [];
@@ -161,3 +162,2 @@ this.itemSizeCache = {};
   this.measureElementCache = {};
-  this.pendingScrollToIndexCallback = null;
   this.getResizeObserver = function () {
@@ -233,3 +233,2 @@ var _ro = null;
   this._willUpdate = function () {
-    _this.pendingScrollToIndexCallback == null ? void 0 : _this.pendingScrollToIndexCallback();
     var scrollElement = _this.options.getScrollElement();
@@ -376,3 +375,3 @@ if (_this.scrollElement !== scrollElement) {
       var _extends2;
-      if (item.start < _this.scrollOffset && _this.isScrolling && _this.scrollDirection === 'backward') {
+      if (item.start < _this.scrollOffset) {
         if (process.env.NODE_ENV !== 'production' && _this.options.debug) {
@@ -439,2 +438,7 @@ console.info('correction', delta);
       behavior = _ref4.behavior;
+    var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+    if (isDynamic && behavior === 'smooth') {
+      console.warn('The `smooth` scroll behavior is not supported with dynamic size.');
+      return;
+    }
     var options = {
@@ -452,15 +456,24 @@ adjustments: undefined,
       behavior = _ref5.behavior;
-    _this.pendingScrollToIndexCallback = null;
-    var offset = _this.scrollOffset;
-    var size = _this.getSize();
-    var count = _this.options.count;
-    var measurements = _this.getMeasurements();
-    var measurement = measurements[Math.max(0, Math.min(index, count - 1))];
-    if (!measurement) {
-      throw new Error("VirtualItem not found for index = " + index);
+    if (_this.scrollToIndexTimeoutId !== null) {
+      clearTimeout(_this.scrollToIndexTimeoutId);
+      _this.scrollToIndexTimeoutId = null;
     }
+    var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+    if (isDynamic && behavior === 'smooth') {
+      console.warn('The `smooth` scroll behavior is not supported with dynamic size.');
+      return;
+    }
+    var getMeasurement = function getMeasurement() {
+      var measurements = _this.getMeasurements();
+      var measurement = measurements[Math.max(0, Math.min(index, _this.options.count - 1))];
+      if (!measurement) {
+        throw new Error("VirtualItem not found for index = " + index);
+      }
+      return measurement;
+    };
+    var measurement = getMeasurement();
     if (align === 'auto') {
-      if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
+      if (measurement.end >= _this.scrollOffset + _this.getSize() - _this.options.scrollPaddingEnd) {
         align = 'end';
-      } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
+      } else if (measurement.start <= _this.scrollOffset + _this.options.scrollPaddingStart) {
         align = 'start';
@@ -473,8 +486,8 @@ } else {
       var toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
-      return _this.getOffsetForAlignment(toOffset, align);
+      var sizeProp = _this.options.horizontal ? 'scrollWidth' : 'scrollHeight';
+      var scrollSize = _this.scrollElement ? 'document' in _this.scrollElement ? _this.scrollElement.document.documentElement[sizeProp] : _this.scrollElement[sizeProp] : 0;
+      var maxOffset = scrollSize - _this.getSize();
+      return Math.min(maxOffset, _this.getOffsetForAlignment(toOffset, align));
     };
     var toOffset = getOffsetForIndexAndAlignment(measurement);
-    if (toOffset === offset) {
-      return;
-    }
     var options = {
@@ -485,16 +498,37 @@ adjustments: undefined,
     _this._scrollToOffset(toOffset, options);
-    var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+    var approxEqual = function approxEqual(a, b) {
+      return Math.abs(a - b) < 1;
+    };
     if (isDynamic) {
-      _this.pendingScrollToIndexCallback = function () {
-        _this.scrollToIndex(index, {
-          align: align,
-          behavior: behavior
-        });
-      };
+      _this.scrollToIndexTimeoutId = setTimeout(function () {
+        _this.scrollToIndexTimeoutId = null;
+        var elementInDOM = !!_this.measureElementCache[_this.options.getItemKey(index)];
+        if (elementInDOM) {
+          var _toOffset = getOffsetForIndexAndAlignment(getMeasurement());
+          if (!approxEqual(_toOffset, _this.scrollOffset)) {
+            _this.scrollToIndex(index, {
+              align: align,
+              behavior: behavior
+            });
+          }
+        } else {
+          _this.scrollToIndex(index, {
+            align: align,
+            behavior: behavior
+          });
+        }
+      });
     }
   };
-  this.scrollBy = function (adjustments, options) {
-    _this._scrollToOffset(_this.scrollOffset, {
-      adjustments: adjustments,
-      behavior: options == null ? void 0 : options.behavior
+  this.scrollBy = function (delta, _temp3) {
+    var _ref6 = _temp3 === void 0 ? {} : _temp3,
+      behavior = _ref6.behavior;
+    var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+    if (isDynamic && behavior === 'smooth') {
+      console.warn('The `smooth` scroll behavior is not supported with dynamic size.');
+      return;
+    }
+    _this._scrollToOffset(_this.scrollOffset + delta, {
+      adjustments: undefined,
+      behavior: behavior
     });
@@ -506,5 +540,5 @@ };
   };
-  this._scrollToOffset = function (offset, _ref6) {
-    var adjustments = _ref6.adjustments,
-      behavior = _ref6.behavior;
+  this._scrollToOffset = function (offset, _ref7) {
+    var adjustments = _ref7.adjustments,
+      behavior = _ref7.behavior;
     _this.options.scrollToFn(offset, {
@@ -546,6 +580,6 @@ behavior: behavior,
 };
-function calculateRange(_ref7) {
-  var measurements = _ref7.measurements,
-    outerSize = _ref7.outerSize,
-    scrollOffset = _ref7.scrollOffset;
+function calculateRange(_ref8) {
+  var measurements = _ref8.measurements,
+    outerSize = _ref8.outerSize,
+    scrollOffset = _ref8.scrollOffset;
   var count = measurements.length - 1;
@@ -552,0 +586,0 @@ var getOffset = function getOffset(index) {

build/lib/index.js

@@ -157,2 +157,3 @@ /**
   this.isScrollingTimeoutId = null;
+  this.scrollToIndexTimeoutId = null;
   this.measurementsCache = [];
@@ -164,3 +165,2 @@ this.itemSizeCache = {};
   this.measureElementCache = {};
-  this.pendingScrollToIndexCallback = null;
   this.getResizeObserver = function () {
@@ -236,3 +236,2 @@ var _ro = null;
   this._willUpdate = function () {
-    _this.pendingScrollToIndexCallback == null ? void 0 : _this.pendingScrollToIndexCallback();
     var scrollElement = _this.options.getScrollElement();
@@ -379,3 +378,3 @@ if (_this.scrollElement !== scrollElement) {
       var _extends2;
-      if (item.start < _this.scrollOffset && _this.isScrolling && _this.scrollDirection === 'backward') {
+      if (item.start < _this.scrollOffset) {
         if (process.env.NODE_ENV !== 'production' && _this.options.debug) {
@@ -442,2 +441,7 @@ console.info('correction', delta);
       behavior = _ref4.behavior;
+    var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+    if (isDynamic && behavior === 'smooth') {
+      console.warn('The `smooth` scroll behavior is not supported with dynamic size.');
+      return;
+    }
     var options = {
@@ -455,15 +459,24 @@ adjustments: undefined,
       behavior = _ref5.behavior;
-    _this.pendingScrollToIndexCallback = null;
-    var offset = _this.scrollOffset;
-    var size = _this.getSize();
-    var count = _this.options.count;
-    var measurements = _this.getMeasurements();
-    var measurement = measurements[Math.max(0, Math.min(index, count - 1))];
-    if (!measurement) {
-      throw new Error("VirtualItem not found for index = " + index);
+    if (_this.scrollToIndexTimeoutId !== null) {
+      clearTimeout(_this.scrollToIndexTimeoutId);
+      _this.scrollToIndexTimeoutId = null;
     }
+    var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+    if (isDynamic && behavior === 'smooth') {
+      console.warn('The `smooth` scroll behavior is not supported with dynamic size.');
+      return;
+    }
+    var getMeasurement = function getMeasurement() {
+      var measurements = _this.getMeasurements();
+      var measurement = measurements[Math.max(0, Math.min(index, _this.options.count - 1))];
+      if (!measurement) {
+        throw new Error("VirtualItem not found for index = " + index);
+      }
+      return measurement;
+    };
+    var measurement = getMeasurement();
     if (align === 'auto') {
-      if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
+      if (measurement.end >= _this.scrollOffset + _this.getSize() - _this.options.scrollPaddingEnd) {
         align = 'end';
-      } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
+      } else if (measurement.start <= _this.scrollOffset + _this.options.scrollPaddingStart) {
         align = 'start';
@@ -476,8 +489,8 @@ } else {
       var toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
-      return _this.getOffsetForAlignment(toOffset, align);
+      var sizeProp = _this.options.horizontal ? 'scrollWidth' : 'scrollHeight';
+      var scrollSize = _this.scrollElement ? 'document' in _this.scrollElement ? _this.scrollElement.document.documentElement[sizeProp] : _this.scrollElement[sizeProp] : 0;
+      var maxOffset = scrollSize - _this.getSize();
+      return Math.min(maxOffset, _this.getOffsetForAlignment(toOffset, align));
     };
     var toOffset = getOffsetForIndexAndAlignment(measurement);
-    if (toOffset === offset) {
-      return;
-    }
     var options = {
@@ -488,16 +501,37 @@ adjustments: undefined,
     _this._scrollToOffset(toOffset, options);
-    var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+    var approxEqual = function approxEqual(a, b) {
+      return Math.abs(a - b) < 1;
+    };
     if (isDynamic) {
-      _this.pendingScrollToIndexCallback = function () {
-        _this.scrollToIndex(index, {
-          align: align,
-          behavior: behavior
-        });
-      };
+      _this.scrollToIndexTimeoutId = setTimeout(function () {
+        _this.scrollToIndexTimeoutId = null;
+        var elementInDOM = !!_this.measureElementCache[_this.options.getItemKey(index)];
+        if (elementInDOM) {
+          var _toOffset = getOffsetForIndexAndAlignment(getMeasurement());
+          if (!approxEqual(_toOffset, _this.scrollOffset)) {
+            _this.scrollToIndex(index, {
+              align: align,
+              behavior: behavior
+            });
+          }
+        } else {
+          _this.scrollToIndex(index, {
+            align: align,
+            behavior: behavior
+          });
+        }
+      });
     }
   };
-  this.scrollBy = function (adjustments, options) {
-    _this._scrollToOffset(_this.scrollOffset, {
-      adjustments: adjustments,
-      behavior: options == null ? void 0 : options.behavior
+  this.scrollBy = function (delta, _temp3) {
+    var _ref6 = _temp3 === void 0 ? {} : _temp3,
+      behavior = _ref6.behavior;
+    var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+    if (isDynamic && behavior === 'smooth') {
+      console.warn('The `smooth` scroll behavior is not supported with dynamic size.');
+      return;
+    }
+    _this._scrollToOffset(_this.scrollOffset + delta, {
+      adjustments: undefined,
+      behavior: behavior
     });
@@ -509,5 +543,5 @@ };
   };
-  this._scrollToOffset = function (offset, _ref6) {
-    var adjustments = _ref6.adjustments,
-      behavior = _ref6.behavior;
+  this._scrollToOffset = function (offset, _ref7) {
+    var adjustments = _ref7.adjustments,
+      behavior = _ref7.behavior;
     _this.options.scrollToFn(offset, {
@@ -549,6 +583,6 @@ behavior: behavior,
 };
-function calculateRange(_ref7) {
-  var measurements = _ref7.measurements,
-    outerSize = _ref7.outerSize,
-    scrollOffset = _ref7.scrollOffset;
+function calculateRange(_ref8) {
+  var measurements = _ref8.measurements,
+    outerSize = _ref8.outerSize,
+    scrollOffset = _ref8.scrollOffset;
   var count = measurements.length - 1;
@@ -555,0 +589,0 @@ var getOffset = function getOffset(index) {

build/umd/index.development.js

@@ -206,2 +206,3 @@ /**
     this.isScrollingTimeoutId = null;
+    this.scrollToIndexTimeoutId = null;
     this.measurementsCache = [];
@@ -213,3 +214,2 @@ this.itemSizeCache = {};
     this.measureElementCache = {};
-    this.pendingScrollToIndexCallback = null;
     this.getResizeObserver = function () {
@@ -285,3 +285,2 @@ var _ro = null;
     this._willUpdate = function () {
-      _this.pendingScrollToIndexCallback == null ? void 0 : _this.pendingScrollToIndexCallback();
       var scrollElement = _this.options.getScrollElement();
@@ -428,3 +427,3 @@ if (_this.scrollElement !== scrollElement) {
         var _extends2;
-        if (item.start < _this.scrollOffset && _this.isScrolling && _this.scrollDirection === 'backward') {
+        if (item.start < _this.scrollOffset) {
           if (_this.options.debug) {
@@ -491,2 +490,7 @@ console.info('correction', delta);
         behavior = _ref4.behavior;
+      var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+      if (isDynamic && behavior === 'smooth') {
+        console.warn('The `smooth` scroll behavior is not supported with dynamic size.');
+        return;
+      }
       var options = {
@@ -504,15 +508,24 @@ adjustments: undefined,
         behavior = _ref5.behavior;
-      _this.pendingScrollToIndexCallback = null;
-      var offset = _this.scrollOffset;
-      var size = _this.getSize();
-      var count = _this.options.count;
-      var measurements = _this.getMeasurements();
-      var measurement = measurements[Math.max(0, Math.min(index, count - 1))];
-      if (!measurement) {
-        throw new Error("VirtualItem not found for index = " + index);
+      if (_this.scrollToIndexTimeoutId !== null) {
+        clearTimeout(_this.scrollToIndexTimeoutId);
+        _this.scrollToIndexTimeoutId = null;
       }
+      var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+      if (isDynamic && behavior === 'smooth') {
+        console.warn('The `smooth` scroll behavior is not supported with dynamic size.');
+        return;
+      }
+      var getMeasurement = function getMeasurement() {
+        var measurements = _this.getMeasurements();
+        var measurement = measurements[Math.max(0, Math.min(index, _this.options.count - 1))];
+        if (!measurement) {
+          throw new Error("VirtualItem not found for index = " + index);
+        }
+        return measurement;
+      };
+      var measurement = getMeasurement();
       if (align === 'auto') {
-        if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
+        if (measurement.end >= _this.scrollOffset + _this.getSize() - _this.options.scrollPaddingEnd) {
           align = 'end';
-        } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
+        } else if (measurement.start <= _this.scrollOffset + _this.options.scrollPaddingStart) {
           align = 'start';
@@ -525,8 +538,8 @@ } else {
         var toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
-        return _this.getOffsetForAlignment(toOffset, align);
+        var sizeProp = _this.options.horizontal ? 'scrollWidth' : 'scrollHeight';
+        var scrollSize = _this.scrollElement ? 'document' in _this.scrollElement ? _this.scrollElement.document.documentElement[sizeProp] : _this.scrollElement[sizeProp] : 0;
+        var maxOffset = scrollSize - _this.getSize();
+        return Math.min(maxOffset, _this.getOffsetForAlignment(toOffset, align));
       };
       var toOffset = getOffsetForIndexAndAlignment(measurement);
-      if (toOffset === offset) {
-        return;
-      }
       var options = {
@@ -537,16 +550,37 @@ adjustments: undefined,
       _this._scrollToOffset(toOffset, options);
-      var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+      var approxEqual = function approxEqual(a, b) {
+        return Math.abs(a - b) < 1;
+      };
       if (isDynamic) {
-        _this.pendingScrollToIndexCallback = function () {
-          _this.scrollToIndex(index, {
-            align: align,
-            behavior: behavior
-          });
-        };
+        _this.scrollToIndexTimeoutId = setTimeout(function () {
+          _this.scrollToIndexTimeoutId = null;
+          var elementInDOM = !!_this.measureElementCache[_this.options.getItemKey(index)];
+          if (elementInDOM) {
+            var _toOffset = getOffsetForIndexAndAlignment(getMeasurement());
+            if (!approxEqual(_toOffset, _this.scrollOffset)) {
+              _this.scrollToIndex(index, {
+                align: align,
+                behavior: behavior
+              });
+            }
+          } else {
+            _this.scrollToIndex(index, {
+              align: align,
+              behavior: behavior
+            });
+          }
+        });
       }
     };
-    this.scrollBy = function (adjustments, options) {
-      _this._scrollToOffset(_this.scrollOffset, {
-        adjustments: adjustments,
-        behavior: options == null ? void 0 : options.behavior
+    this.scrollBy = function (delta, _temp3) {
+      var _ref6 = _temp3 === void 0 ? {} : _temp3,
+        behavior = _ref6.behavior;
+      var isDynamic = Object.keys(_this.measureElementCache).length > 0;
+      if (isDynamic && behavior === 'smooth') {
+        console.warn('The `smooth` scroll behavior is not supported with dynamic size.');
+        return;
+      }
+      _this._scrollToOffset(_this.scrollOffset + delta, {
+        adjustments: undefined,
+        behavior: behavior
       });
@@ -558,5 +592,5 @@ };
     };
-    this._scrollToOffset = function (offset, _ref6) {
-      var adjustments = _ref6.adjustments,
-        behavior = _ref6.behavior;
+    this._scrollToOffset = function (offset, _ref7) {
+      var adjustments = _ref7.adjustments,
+        behavior = _ref7.behavior;
       _this.options.scrollToFn(offset, {
@@ -598,6 +632,6 @@ behavior: behavior,
   };
-  function calculateRange(_ref7) {
-    var measurements = _ref7.measurements,
-      outerSize = _ref7.outerSize,
-      scrollOffset = _ref7.scrollOffset;
+  function calculateRange(_ref8) {
+    var measurements = _ref8.measurements,
+      outerSize = _ref8.outerSize,
+      scrollOffset = _ref8.scrollOffset;
     var count = measurements.length - 1;
@@ -604,0 +638,0 @@ var getOffset = function getOffset(index) {

build/umd/index.production.js

@@ -11,3 +11,3 @@ /**
  */
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).VirtualCore={})}(this,(function(e){"use strict";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},n.apply(this,arguments)}function t(e,n,t){var o,r=[];return function(){var i;t.key&&null!=t.debug&&t.debug()&&(i=Date.now());var s,l=e();if(!(l.length!==r.length||l.some((function(e,n){return r[n]!==e}))))return o;if(r=l,t.key&&null!=t.debug&&t.debug()&&(s=Date.now()),o=n.apply(void 0,l),null==t||null==t.onChange||t.onChange(o),t.key&&null!=t.debug&&t.debug()){var a=Math.round(100*(Date.now()-i))/100,u=Math.round(100*(Date.now()-s))/100,c=u/16,d=function(e,n){for(e=String(e);e.length<n;)e=" "+e;return e};console.info("%c⏱ "+d(u,5)+" /"+d(a,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*c,120))+"deg 100% 31%);",null==t?void 0:t.key)}return o}}var o=function(e){return e},r=function(e){for(var n=Math.max(e.startIndex-e.overscan,0),t=Math.min(e.endIndex+e.overscan,e.count-1),o=[],r=n;r<=t;r++)o.push(r);return o},i={element:["scrollLeft","scrollTop"],window:["scrollX","scrollY"]},s=function(e){return function(n,t){if(n.scrollElement){var o=i[e][0],r=i[e][1],s=n.scrollElement[o],l=n.scrollElement[r],a=function(){var e=n.scrollElement[n.options.horizontal?o:r];t(e)};a();var u=function(e){var t=e.currentTarget,i=t[o],u=t[r];(n.options.horizontal?s-i:l-u)&&a(),s=i,l=u};return n.scrollElement.addEventListener("scroll",u,{capture:!1,passive:!0}),function(){n.scrollElement.removeEventListener("scroll",u)}}}},l=s("element"),a=s("window"),u=function(e,n){return Math.round(e.getBoundingClientRect()[n.options.horizontal?"width":"height"])};e.Virtualizer=function(e){var i,s=this;this.unsubs=[],this.scrollElement=null,this.isScrolling=!1,this.isScrollingTimeoutId=null,this.measurementsCache=[],this.itemSizeCache={},this.pendingMeasuredCacheIndexes=[],this.scrollDirection=null,this.scrollAdjustments=0,this.measureElementCache={},this.pendingScrollToIndexCallback=null,this.getResizeObserver=(i=null,function(){return i||("undefined"!=typeof ResizeObserver?i=new ResizeObserver((function(e){e.forEach((function(e){s._measureElement(e.target,!1)}))})):null)}),this.range={startIndex:0,endIndex:0},this.setOptions=function(e){Object.entries(e).forEach((function(n){var t=n[0];void 0===n[1]&&delete e[t]})),s.options=n({debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:o,rangeExtractor:r,onChange:function(){},measureElement:u,initialRect:{width:0,height:0},scrollMargin:0,scrollingDelay:150,indexAttribute:"data-index",initialMeasurementsCache:[]},e)},this.notify=function(){null==s.options.onChange||s.options.onChange(s)},this.cleanup=function(){s.unsubs.filter(Boolean).forEach((function(e){return e()})),s.unsubs=[],s.scrollElement=null},this._didMount=function(){var e=s.getResizeObserver();return Object.values(s.measureElementCache).forEach((function(n){return null==e?void 0:e.observe(n)})),function(){null==e||e.disconnect(),s.cleanup()}},this._willUpdate=function(){null==s.pendingScrollToIndexCallback||s.pendingScrollToIndexCallback();var e=s.options.getScrollElement();s.scrollElement!==e?(s.cleanup(),s.scrollElement=e,s._scrollToOffset(s.scrollOffset,{adjustments:void 0,behavior:void 0}),s.unsubs.push(s.options.observeElementRect(s,(function(e){s.scrollRect=e,s.calculateRange()}))),s.unsubs.push(s.options.observeElementOffset(s,(function(e){if(s.scrollAdjustments=0,s.scrollOffset!==e){null!==s.isScrollingTimeoutId&&(clearTimeout(s.isScrollingTimeoutId),s.isScrollingTimeoutId=null);var n=function(e){s.isScrolling!==e&&(s.isScrolling=e,s.notify())};s.scrollDirection=s.scrollOffset<e?"forward":"backward",s.scrollOffset=e,s.calculateRange(),n(!0),s.isScrollingTimeoutId=setTimeout((function(){s.isScrollingTimeoutId=null,s.scrollDirection=null,n(!1)}),s.options.scrollingDelay)}})))):s.isScrolling||s.calculateRange()},this.getSize=function(){return s.scrollRect[s.options.horizontal?"width":"height"]},this.getMeasurements=t((function(){return[s.options.count,s.options.paddingStart,s.options.scrollMargin,s.options.getItemKey,s.itemSizeCache]}),(function(e,n,t,o,r){var i=s.pendingMeasuredCacheIndexes.length>0?Math.min.apply(Math,s.pendingMeasuredCacheIndexes):0;s.pendingMeasuredCacheIndexes=[];for(var l=s.measurementsCache.slice(0,i),a=i;a<e;a++){var u=o(a),c=r[u],d=l[a-1]?l[a-1].end:n+t,f="number"==typeof c?c:s.options.estimateSize(a),h=d+f;l[a]={index:a,start:d,size:f,end:h,key:u}}return s.measurementsCache=l,l}),{key:!1,debug:function(){return s.options.debug}}),this.calculateRange=t((function(){return[s.getMeasurements(),s.getSize(),s.scrollOffset]}),(function(e,n,t){var o=function(e){var n=e.measurements,t=e.outerSize,o=e.scrollOffset,r=n.length-1,i=function(e,n,t,o){for(;e<=n;){var r=(e+n)/2|0,i=t(r);if(i<o)e=r+1;else{if(!(i>o))return r;n=r-1}}return e>0?e-1:0}(0,r,(function(e){return n[e].start}),o),s=i;for(;s<r&&n[s].end<o+t;)s++;return{startIndex:i,endIndex:s}}({measurements:e,outerSize:n,scrollOffset:t});return o.startIndex===s.range.startIndex&&o.endIndex===s.range.endIndex||(s.range=o,s.notify()),s.range}),{key:!1,debug:function(){return s.options.debug}}),this.getIndexes=t((function(){return[s.options.rangeExtractor,s.range,s.options.overscan,s.options.count]}),(function(e,t,o,r){return e(n({},t,{overscan:o,count:r}))}),{key:!1,debug:function(){return s.options.debug}}),this.indexFromElement=function(e){var n=s.options.indexAttribute,t=e.getAttribute(n);return t?parseInt(t,10):(console.warn("Missing attribute name '"+n+"={index}' on measured element."),-1)},this._measureElement=function(e,t){var o,r=s.indexFromElement(e),i=s.measurementsCache[r];if(i){var l=s.measureElementCache[i.key],a=s.getResizeObserver();if(e.isConnected){l&&l===e||(l&&(null==a||a.unobserve(l)),s.measureElementCache[i.key]=e,null==a||a.observe(e));var u,c=s.options.measureElement(e,s),d=c-(null!=(o=s.itemSizeCache[i.key])?o:i.size);if(0!==d)i.start<s.scrollOffset&&s.isScrolling&&"backward"===s.scrollDirection&&s._scrollToOffset(s.scrollOffset,{adjustments:s.scrollAdjustments+=d,behavior:void 0}),s.pendingMeasuredCacheIndexes.push(r),s.itemSizeCache=n({},s.itemSizeCache,((u={})[i.key]=c,u)),s.notify()}else l&&(null==a||a.unobserve(l),delete s.measureElementCache[i.key])}},this.measureElement=function(e){e&&s._measureElement(e,!0)},this.getVirtualItems=t((function(){return[s.getIndexes(),s.getMeasurements()]}),(function(e,n){for(var t=[],o=0,r=e.length;o<r;o++){var i=n[e[o]];t.push(i)}return t}),{key:!1,debug:function(){return s.options.debug}}),this.getOffsetForAlignment=function(e,n){var t=s.scrollOffset,o=s.getSize();return"auto"===n&&(n=e<=t?"start":e>=t+o?"end":"start"),"start"===n?e:"end"===n?e-o:"center"===n?e-o/2:e},this.scrollToOffset=function(e,n){var t=void 0===n?{}:n,o=t.align,r=void 0===o?"start":o,i={adjustments:void 0,behavior:t.behavior,sync:!1};s._scrollToOffset(s.getOffsetForAlignment(e,r),i)},this.scrollToIndex=function(e,n){var t=void 0===n?{}:n,o=t.align,r=void 0===o?"auto":o,i=t.behavior;s.pendingScrollToIndexCallback=null;var l=s.scrollOffset,a=s.getSize(),u=s.options.count,c=s.getMeasurements()[Math.max(0,Math.min(e,u-1))];if(!c)throw new Error("VirtualItem not found for index = "+e);if("auto"===r)if(c.end>=l+a-s.options.scrollPaddingEnd)r="end";else{if(!(c.start<=l+s.options.scrollPaddingStart))return;r="start"}var d=function(e){var n="end"===r?e.end+s.options.scrollPaddingEnd:e.start-s.options.scrollPaddingStart;return s.getOffsetForAlignment(n,r)}(c);if(d!==l){var f={adjustments:void 0,behavior:i};s._scrollToOffset(d,f),Object.keys(s.measureElementCache).length>0&&(s.pendingScrollToIndexCallback=function(){s.scrollToIndex(e,{align:r,behavior:i})})}},this.scrollBy=function(e,n){s._scrollToOffset(s.scrollOffset,{adjustments:e,behavior:null==n?void 0:n.behavior})},this.getTotalSize=function(){var e;return((null==(e=s.getMeasurements()[s.options.count-1])?void 0:e.end)||s.options.paddingStart)-s.options.scrollMargin+s.options.paddingEnd},this._scrollToOffset=function(e,n){var t=n.adjustments,o=n.behavior;s.options.scrollToFn(e,{behavior:o,adjustments:t},s)},this.measure=function(){s.itemSizeCache={},s.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset,this.measurementsCache=this.options.initialMeasurementsCache,this.measurementsCache.forEach((function(e){s.itemSizeCache[e.key]=e.size})),this.calculateRange()},e.defaultKeyExtractor=o,e.defaultRangeExtractor=r,e.elementScroll=function(e,n,t){var o,r,i=n.adjustments,s=void 0===i?0:i,l=n.behavior,a=e+s;null==(o=t.scrollElement)||null==o.scrollTo||o.scrollTo(((r={})[t.options.horizontal?"left":"top"]=a,r.behavior=l,r))},e.measureElement=u,e.memo=t,e.observeElementOffset=l,e.observeElementRect=function(e,n){var t=new ResizeObserver((function(e){var t=e[0];if(t){var o=t.contentRect,r=o.width,i=o.height;n({width:Math.round(r),height:Math.round(i)})}else n({width:0,height:0})}));if(e.scrollElement)return n(e.scrollElement.getBoundingClientRect()),t.observe(e.scrollElement),function(){t.unobserve(e.scrollElement)}},e.observeWindowOffset=a,e.observeWindowRect=function(e,n){var t=function(e,n){var t={height:-1,width:-1};return function(o){(e.options.horizontal?o.width!==t.width:o.height!==t.height)&&n(o),t=o}}(e,n),o=function(){return t({width:e.scrollElement.innerWidth,height:e.scrollElement.innerHeight})};if(e.scrollElement)return o(),e.scrollElement.addEventListener("resize",o,{capture:!1,passive:!0}),function(){e.scrollElement.removeEventListener("resize",o)}},e.windowScroll=function(e,n,t){var o,r,i=n.adjustments,s=void 0===i?0:i,l=n.behavior,a=e+s;null==(o=t.scrollElement)||null==o.scrollTo||o.scrollTo(((r={})[t.options.horizontal?"left":"top"]=a,r.behavior=l,r))},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VirtualCore={})}(this,(function(e){"use strict";function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},t.apply(this,arguments)}function n(e,t,n){var o,r=[];return function(){var i;n.key&&null!=n.debug&&n.debug()&&(i=Date.now());var s,l=e();if(!(l.length!==r.length||l.some((function(e,t){return r[t]!==e}))))return o;if(r=l,n.key&&null!=n.debug&&n.debug()&&(s=Date.now()),o=t.apply(void 0,l),null==n||null==n.onChange||n.onChange(o),n.key&&null!=n.debug&&n.debug()){var a=Math.round(100*(Date.now()-i))/100,u=Math.round(100*(Date.now()-s))/100,c=u/16,d=function(e,t){for(e=String(e);e.length<t;)e=" "+e;return e};console.info("%c⏱ "+d(u,5)+" /"+d(a,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*c,120))+"deg 100% 31%);",null==n?void 0:n.key)}return o}}var o=function(e){return e},r=function(e){for(var t=Math.max(e.startIndex-e.overscan,0),n=Math.min(e.endIndex+e.overscan,e.count-1),o=[],r=t;r<=n;r++)o.push(r);return o},i={element:["scrollLeft","scrollTop"],window:["scrollX","scrollY"]},s=function(e){return function(t,n){if(t.scrollElement){var o=i[e][0],r=i[e][1],s=t.scrollElement[o],l=t.scrollElement[r],a=function(){var e=t.scrollElement[t.options.horizontal?o:r];n(e)};a();var u=function(e){var n=e.currentTarget,i=n[o],u=n[r];(t.options.horizontal?s-i:l-u)&&a(),s=i,l=u};return t.scrollElement.addEventListener("scroll",u,{capture:!1,passive:!0}),function(){t.scrollElement.removeEventListener("scroll",u)}}}},l=s("element"),a=s("window"),u=function(e,t){return Math.round(e.getBoundingClientRect()[t.options.horizontal?"width":"height"])};e.Virtualizer=function(e){var i,s=this;this.unsubs=[],this.scrollElement=null,this.isScrolling=!1,this.isScrollingTimeoutId=null,this.scrollToIndexTimeoutId=null,this.measurementsCache=[],this.itemSizeCache={},this.pendingMeasuredCacheIndexes=[],this.scrollDirection=null,this.scrollAdjustments=0,this.measureElementCache={},this.getResizeObserver=(i=null,function(){return i||("undefined"!=typeof ResizeObserver?i=new ResizeObserver((function(e){e.forEach((function(e){s._measureElement(e.target,!1)}))})):null)}),this.range={startIndex:0,endIndex:0},this.setOptions=function(e){Object.entries(e).forEach((function(t){var n=t[0];void 0===t[1]&&delete e[n]})),s.options=t({debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:o,rangeExtractor:r,onChange:function(){},measureElement:u,initialRect:{width:0,height:0},scrollMargin:0,scrollingDelay:150,indexAttribute:"data-index",initialMeasurementsCache:[]},e)},this.notify=function(){null==s.options.onChange||s.options.onChange(s)},this.cleanup=function(){s.unsubs.filter(Boolean).forEach((function(e){return e()})),s.unsubs=[],s.scrollElement=null},this._didMount=function(){var e=s.getResizeObserver();return Object.values(s.measureElementCache).forEach((function(t){return null==e?void 0:e.observe(t)})),function(){null==e||e.disconnect(),s.cleanup()}},this._willUpdate=function(){var e=s.options.getScrollElement();s.scrollElement!==e?(s.cleanup(),s.scrollElement=e,s._scrollToOffset(s.scrollOffset,{adjustments:void 0,behavior:void 0}),s.unsubs.push(s.options.observeElementRect(s,(function(e){s.scrollRect=e,s.calculateRange()}))),s.unsubs.push(s.options.observeElementOffset(s,(function(e){if(s.scrollAdjustments=0,s.scrollOffset!==e){null!==s.isScrollingTimeoutId&&(clearTimeout(s.isScrollingTimeoutId),s.isScrollingTimeoutId=null);var t=function(e){s.isScrolling!==e&&(s.isScrolling=e,s.notify())};s.scrollDirection=s.scrollOffset<e?"forward":"backward",s.scrollOffset=e,s.calculateRange(),t(!0),s.isScrollingTimeoutId=setTimeout((function(){s.isScrollingTimeoutId=null,s.scrollDirection=null,t(!1)}),s.options.scrollingDelay)}})))):s.isScrolling||s.calculateRange()},this.getSize=function(){return s.scrollRect[s.options.horizontal?"width":"height"]},this.getMeasurements=n((function(){return[s.options.count,s.options.paddingStart,s.options.scrollMargin,s.options.getItemKey,s.itemSizeCache]}),(function(e,t,n,o,r){var i=s.pendingMeasuredCacheIndexes.length>0?Math.min.apply(Math,s.pendingMeasuredCacheIndexes):0;s.pendingMeasuredCacheIndexes=[];for(var l=s.measurementsCache.slice(0,i),a=i;a<e;a++){var u=o(a),c=r[u],d=l[a-1]?l[a-1].end:t+n,f="number"==typeof c?c:s.options.estimateSize(a),h=d+f;l[a]={index:a,start:d,size:f,end:h,key:u}}return s.measurementsCache=l,l}),{key:!1,debug:function(){return s.options.debug}}),this.calculateRange=n((function(){return[s.getMeasurements(),s.getSize(),s.scrollOffset]}),(function(e,t,n){var o=function(e){var t=e.measurements,n=e.outerSize,o=e.scrollOffset,r=t.length-1,i=function(e,t,n,o){for(;e<=t;){var r=(e+t)/2|0,i=n(r);if(i<o)e=r+1;else{if(!(i>o))return r;t=r-1}}return e>0?e-1:0}(0,r,(function(e){return t[e].start}),o),s=i;for(;s<r&&t[s].end<o+n;)s++;return{startIndex:i,endIndex:s}}({measurements:e,outerSize:t,scrollOffset:n});return o.startIndex===s.range.startIndex&&o.endIndex===s.range.endIndex||(s.range=o,s.notify()),s.range}),{key:!1,debug:function(){return s.options.debug}}),this.getIndexes=n((function(){return[s.options.rangeExtractor,s.range,s.options.overscan,s.options.count]}),(function(e,n,o,r){return e(t({},n,{overscan:o,count:r}))}),{key:!1,debug:function(){return s.options.debug}}),this.indexFromElement=function(e){var t=s.options.indexAttribute,n=e.getAttribute(t);return n?parseInt(n,10):(console.warn("Missing attribute name '"+t+"={index}' on measured element."),-1)},this._measureElement=function(e,n){var o,r=s.indexFromElement(e),i=s.measurementsCache[r];if(i){var l=s.measureElementCache[i.key],a=s.getResizeObserver();if(e.isConnected){l&&l===e||(l&&(null==a||a.unobserve(l)),s.measureElementCache[i.key]=e,null==a||a.observe(e));var u,c=s.options.measureElement(e,s),d=c-(null!=(o=s.itemSizeCache[i.key])?o:i.size);if(0!==d)i.start<s.scrollOffset&&s._scrollToOffset(s.scrollOffset,{adjustments:s.scrollAdjustments+=d,behavior:void 0}),s.pendingMeasuredCacheIndexes.push(r),s.itemSizeCache=t({},s.itemSizeCache,((u={})[i.key]=c,u)),s.notify()}else l&&(null==a||a.unobserve(l),delete s.measureElementCache[i.key])}},this.measureElement=function(e){e&&s._measureElement(e,!0)},this.getVirtualItems=n((function(){return[s.getIndexes(),s.getMeasurements()]}),(function(e,t){for(var n=[],o=0,r=e.length;o<r;o++){var i=t[e[o]];n.push(i)}return n}),{key:!1,debug:function(){return s.options.debug}}),this.getOffsetForAlignment=function(e,t){var n=s.scrollOffset,o=s.getSize();return"auto"===t&&(t=e<=n?"start":e>=n+o?"end":"start"),"start"===t?e:"end"===t?e-o:"center"===t?e-o/2:e},this.scrollToOffset=function(e,t){var n=void 0===t?{}:t,o=n.align,r=void 0===o?"start":o,i=n.behavior;if(Object.keys(s.measureElementCache).length>0&&"smooth"===i)console.warn("The `smooth` scroll behavior is not supported with dynamic size.");else{var l={adjustments:void 0,behavior:i,sync:!1};s._scrollToOffset(s.getOffsetForAlignment(e,r),l)}},this.scrollToIndex=function(e,t){var n=void 0===t?{}:t,o=n.align,r=void 0===o?"auto":o,i=n.behavior;null!==s.scrollToIndexTimeoutId&&(clearTimeout(s.scrollToIndexTimeoutId),s.scrollToIndexTimeoutId=null);var l=Object.keys(s.measureElementCache).length>0;if(l&&"smooth"===i)console.warn("The `smooth` scroll behavior is not supported with dynamic size.");else{var a=function(){var t=s.getMeasurements()[Math.max(0,Math.min(e,s.options.count-1))];if(!t)throw new Error("VirtualItem not found for index = "+e);return t},u=a();if("auto"===r)if(u.end>=s.scrollOffset+s.getSize()-s.options.scrollPaddingEnd)r="end";else{if(!(u.start<=s.scrollOffset+s.options.scrollPaddingStart))return;r="start"}var c=function(e){var t="end"===r?e.end+s.options.scrollPaddingEnd:e.start-s.options.scrollPaddingStart,n=s.options.horizontal?"scrollWidth":"scrollHeight",o=(s.scrollElement?"document"in s.scrollElement?s.scrollElement.document.documentElement[n]:s.scrollElement[n]:0)-s.getSize();return Math.min(o,s.getOffsetForAlignment(t,r))},d=c(u),f={adjustments:void 0,behavior:i};s._scrollToOffset(d,f);l&&(s.scrollToIndexTimeoutId=setTimeout((function(){var t,n;if(s.scrollToIndexTimeoutId=null,!!s.measureElementCache[s.options.getItemKey(e)]){var o=c(a());t=o,n=s.scrollOffset,Math.abs(t-n)<1||s.scrollToIndex(e,{align:r,behavior:i})}else s.scrollToIndex(e,{align:r,behavior:i})})))}},this.scrollBy=function(e,t){var n=(void 0===t?{}:t).behavior;Object.keys(s.measureElementCache).length>0&&"smooth"===n?console.warn("The `smooth` scroll behavior is not supported with dynamic size."):s._scrollToOffset(s.scrollOffset+e,{adjustments:void 0,behavior:n})},this.getTotalSize=function(){var e;return((null==(e=s.getMeasurements()[s.options.count-1])?void 0:e.end)||s.options.paddingStart)-s.options.scrollMargin+s.options.paddingEnd},this._scrollToOffset=function(e,t){var n=t.adjustments,o=t.behavior;s.options.scrollToFn(e,{behavior:o,adjustments:n},s)},this.measure=function(){s.itemSizeCache={},s.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset,this.measurementsCache=this.options.initialMeasurementsCache,this.measurementsCache.forEach((function(e){s.itemSizeCache[e.key]=e.size})),this.calculateRange()},e.defaultKeyExtractor=o,e.defaultRangeExtractor=r,e.elementScroll=function(e,t,n){var o,r,i=t.adjustments,s=void 0===i?0:i,l=t.behavior,a=e+s;null==(o=n.scrollElement)||null==o.scrollTo||o.scrollTo(((r={})[n.options.horizontal?"left":"top"]=a,r.behavior=l,r))},e.measureElement=u,e.memo=n,e.observeElementOffset=l,e.observeElementRect=function(e,t){var n=new ResizeObserver((function(e){var n=e[0];if(n){var o=n.contentRect,r=o.width,i=o.height;t({width:Math.round(r),height:Math.round(i)})}else t({width:0,height:0})}));if(e.scrollElement)return t(e.scrollElement.getBoundingClientRect()),n.observe(e.scrollElement),function(){n.unobserve(e.scrollElement)}},e.observeWindowOffset=a,e.observeWindowRect=function(e,t){var n=function(e,t){var n={height:-1,width:-1};return function(o){(e.options.horizontal?o.width!==n.width:o.height!==n.height)&&t(o),n=o}}(e,t),o=function(){return n({width:e.scrollElement.innerWidth,height:e.scrollElement.innerHeight})};if(e.scrollElement)return o(),e.scrollElement.addEventListener("resize",o,{capture:!1,passive:!0}),function(){e.scrollElement.removeEventListener("resize",o)}},e.windowScroll=function(e,t,n){var o,r,i=t.adjustments,s=void 0===i?0:i,l=t.behavior,a=e+s;null==(o=n.scrollElement)||null==o.scrollTo||o.scrollTo(((r={})[n.options.horizontal?"left":"top"]=a,r.behavior=l,r))},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.production.js.map

package.json

 {
   "name": "@tanstack/virtual-core",
   "author": "Tanner Linsley",
-  "version": "3.0.0-beta.35",
+  "version": "3.0.0-beta.36",
   "description": "Headless UI for virtualizing scrollable elements in TS/JS + Frameworks",
@@ -6,0 +6,0 @@ "license": "MIT",

src/index.ts

@@ -291,2 +291,3 @@ import { memo } from './utils'
   private isScrollingTimeoutId: ReturnType<typeof setTimeout> | null = null
+  private scrollToIndexTimeoutId: ReturnType<typeof setTimeout> | null = null
   measurementsCache: VirtualItem[] = []
@@ -300,3 +301,2 @@ private itemSizeCache: Record<Key, number> = {}
   private measureElementCache: Record<Key, TItemElement> = {}
-  private pendingScrollToIndexCallback: (() => void) | null = null
   private getResizeObserver = (() => {
@@ -385,4 +385,2 @@ let _ro: ResizeObserver | null = null
   _willUpdate = () => {
-    this.pendingScrollToIndexCallback?.()
-
     const scrollElement = this.options.getScrollElement()
@@ -585,7 +583,3 @@
     if (delta !== 0) {
-      if (
-        item.start < this.scrollOffset &&
-        this.isScrolling &&
-        this.scrollDirection === 'backward'
-      ) {
+      if (item.start < this.scrollOffset) {
         if (process.env.NODE_ENV !== 'production' && this.options.debug) {
@@ -666,2 +660,11 @@ console.info('correction', delta)
   ) => {
+    const isDynamic = Object.keys(this.measureElementCache).length > 0
+
+    if (isDynamic && behavior === 'smooth') {
+      console.warn(
+        'The `smooth` scroll behavior is not supported with dynamic size.',
+      )
+      return
+    }
+
     const options = {
@@ -679,21 +682,39 @@ adjustments: undefined,
   ) => {
-    this.pendingScrollToIndexCallback = null
+    if (this.scrollToIndexTimeoutId !== null) {
+      clearTimeout(this.scrollToIndexTimeoutId)
+      this.scrollToIndexTimeoutId = null
+    }
 
-    const offset = this.scrollOffset
-    const size = this.getSize()
-    const { count } = this.options
+    const isDynamic = Object.keys(this.measureElementCache).length > 0
 
-    const measurements = this.getMeasurements()
-    const measurement = measurements[Math.max(0, Math.min(index, count - 1))]
+    if (isDynamic && behavior === 'smooth') {
+      console.warn(
+        'The `smooth` scroll behavior is not supported with dynamic size.',
+      )
+      return
+    }
 
-    if (!measurement) {
-      throw new Error(`VirtualItem not found for index = ${index}`)
+    const getMeasurement = () => {
+      const measurements = this.getMeasurements()
+      const measurement =
+        measurements[Math.max(0, Math.min(index, this.options.count - 1))]
+
+      if (!measurement) {
+        throw new Error(`VirtualItem not found for index = ${index}`)
+      }
+
+      return measurement
     }
 
+    const measurement = getMeasurement()
+
     if (align === 'auto') {
-      if (measurement.end >= offset + size - this.options.scrollPaddingEnd) {
+      if (
+        measurement.end >=
+        this.scrollOffset + this.getSize() - this.options.scrollPaddingEnd
+      ) {
         align = 'end'
       } else if (
         measurement.start <=
-        offset + this.options.scrollPaddingStart
+        this.scrollOffset + this.options.scrollPaddingStart
       ) {
@@ -712,3 +733,12 @@ align = 'start'
 
-      return this.getOffsetForAlignment(toOffset, align)
+      const sizeProp = this.options.horizontal ? 'scrollWidth' : 'scrollHeight'
+      const scrollSize = this.scrollElement
+        ? 'document' in this.scrollElement
+          ? this.scrollElement.document.documentElement[sizeProp]
+          : this.scrollElement[sizeProp]
+        : 0
+
+      const maxOffset = scrollSize - this.getSize()
+
+      return Math.min(maxOffset, this.getOffsetForAlignment(toOffset, align))
     }
@@ -718,6 +748,2 @@
 
-    if (toOffset === offset) {
-      return
-    }
-
     const options = {
@@ -729,15 +755,37 @@ adjustments: undefined,
 
-    const isDynamic = Object.keys(this.measureElementCache).length > 0
+    const approxEqual = (a: number, b: number) => Math.abs(a - b) < 1
 
     if (isDynamic) {
-      this.pendingScrollToIndexCallback = () => {
-        this.scrollToIndex(index, { align, behavior })
-      }
+      this.scrollToIndexTimeoutId = setTimeout(() => {
+        this.scrollToIndexTimeoutId = null
+
+        const elementInDOM =
+          !!this.measureElementCache[this.options.getItemKey(index)]
+
+        if (elementInDOM) {
+          const toOffset = getOffsetForIndexAndAlignment(getMeasurement())
+
+          if (!approxEqual(toOffset, this.scrollOffset)) {
+            this.scrollToIndex(index, { align, behavior })
+          }
+        } else {
+          this.scrollToIndex(index, { align, behavior })
+        }
+      })
     }
   }
 
-  scrollBy = (adjustments: number, options?: { behavior: ScrollBehavior }) => {
-    this._scrollToOffset(this.scrollOffset, {
-      adjustments,
-      behavior: options?.behavior,
+  scrollBy = (delta: number, { behavior }: ScrollToOffsetOptions = {}) => {
+    const isDynamic = Object.keys(this.measureElementCache).length > 0
+
+    if (isDynamic && behavior === 'smooth') {
+      console.warn(
+        'The `smooth` scroll behavior is not supported with dynamic size.',
+      )
+      return
+    }
+
+    this._scrollToOffset(this.scrollOffset + delta, {
+      adjustments: undefined,
+      behavior,
     })
@@ -744,0 +792,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

383133

increased by6.6%

Lines of code

3593

increased by5.09%

No dependency changes