@pdanpdan/virtual-scroll 0.4.0 → 0.6.0

package/src/components/VirtualScroll.test.ts

@@ -1,10 +1,13 @@
-import type { ItemSlotProps, ScrollDetails } from '../types';
+import type { ItemSlotProps, ScrollbarSlotProps, ScrollDetails, VirtualScrollInstance } from '../types';
+import type { VueWrapper } from '@vue/test-utils';
+import type { DefineComponent } from 'vue';
 
 /* global ScrollToOptions, ResizeObserverCallback */
 import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { h, nextTick } from 'vue';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { h, nextTick, ref } from 'vue';
 
+import { displayToVirtual, virtualToDisplay } from '../utils/virtual-scroll-logic';
 import VirtualScroll from './VirtualScroll.vue';
 
 // --- Mocks ---
@@ -26,9 +29,12 @@ HTMLElement.prototype.scrollTo = function (this: HTMLElement, options?: number |
     this.scrollLeft = options;
     this.scrollTop = y;
   }
-  this.dispatchEvent(new Event('scroll'));
+  this.dispatchEvent(new (this.ownerDocument?.defaultView?.Event || Event)('scroll'));
 };
 
+HTMLElement.prototype.setPointerCapture = vi.fn();
+HTMLElement.prototype.releasePointerCapture = vi.fn();
+
 interface ResizeObserverMock extends ResizeObserver {
   callback: ResizeObserverCallback;
   targets: Set<Element>;
@@ -56,11 +62,11 @@ globalThis.ResizeObserver = class ResizeObserver {
   }
 } as unknown as typeof ResizeObserver;
 
-function triggerResize(el: Element, width: number, height: number) {
+function triggerResize(el: Element, width: number, height: number, useBorderBox = true) {
   const obs = observers.find((o) => o.targets.has(el));
   if (obs) {
     obs.callback([ {
-      borderBoxSize: [ { blockSize: height, inlineSize: width } ],
+      ...(useBorderBox ? { borderBoxSize: [ { blockSize: height, inlineSize: width } ] } : {}),
       contentRect: {
         bottom: height,
         height,
@@ -99,15 +105,20 @@ describe('virtualScroll', () => {
   const mockItems: MockItem[] = Array.from({ length: 100 }, (_, i) => ({ id: i, label: `Item ${ i }` }));
 
   beforeEach(() => {
-    vi.clearAllMocks();
-    observers.length = 0;
     Object.defineProperty(window, 'scrollX', { configurable: true, value: 0, writable: true });
     Object.defineProperty(window, 'scrollY', { configurable: true, value: 0, writable: true });
     Object.defineProperty(window, 'innerHeight', { configurable: true, value: 500 });
     Object.defineProperty(window, 'innerWidth', { configurable: true, value: 500 });
+    vi.useFakeTimers({ toFake: [ 'requestAnimationFrame' ] });
+  });
+
+  afterEach(() => {
+    observers.length = 0;
+    vi.clearAllMocks();
+    vi.useRealTimers();
   });
 
-  describe('basic Rendering', () => {
+  describe('core rendering & lifecycle', () => {
     it('renders the visible items', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
@@ -157,6 +168,10 @@ describe('virtualScroll', () => {
       const container = wrapper.find('.virtual-scroll-container');
       expect(container.classes()).toContain('virtual-scroll--horizontal');
       expect((wrapper.find('.virtual-scroll-wrapper').element as HTMLElement).style.inlineSize).toBe('10000px');
+
+      // 500px / 100px = 5 visible
+      // + 5 bufferAfter = 10 total
+      expect(wrapper.findAll('.virtual-scroll-item').length).toBe(10);
     });
 
     it('supports grid mode (both directions)', async () => {
@@ -173,10 +188,68 @@ describe('virtualScroll', () => {
       const style = (wrapper.find('.virtual-scroll-wrapper').element as HTMLElement).style;
       expect(style.blockSize).toBe('5000px');
       expect(style.inlineSize).toBe('500px');
+
+      // 500px / 50px = 10 visible rows
+      // + 5 bufferAfter = 15 total rows
+      expect(wrapper.findAll('.virtual-scroll-item').length).toBe(15);
+    });
+
+    it('works with window as container', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          container: window,
+          itemSize: 50,
+          items: mockItems,
+        },
+      });
+      await nextTick();
+      expect(wrapper.classes()).toContain('virtual-scroll--window');
+    });
+
+    it('unmounts cleanly', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems,
+        },
+      });
+      await nextTick();
+      wrapper.unmount();
+      // no errors should be thrown
+    });
+
+    it('handles hostRef change', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems,
+          containerTag: 'div',
+        },
+      });
+      await nextTick();
+      await wrapper.setProps({ containerTag: 'section' });
+      await nextTick();
+      // should have unobserved old and observed new
+    });
+
+    it('stops active smooth scroll via stopProgrammaticScroll', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      vs.scrollToIndex(50, null, { behavior: 'smooth' });
+      await nextTick();
+
+      const posBefore = vs.scrollDetails.scrollOffset.y;
+      vs.stopProgrammaticScroll();
+      await nextTick();
+
+      // Should not have moved significantly or at all from where it was stopped
+      expect(vs.scrollDetails.scrollOffset.y).toBe(posBefore);
     });
   });
 
-  describe('interactions', () => {
+  describe('scrolling interaction', () => {
     it('scrolls and updates visible items', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
@@ -202,6 +275,10 @@ describe('virtualScroll', () => {
 
       expect(wrapper.text()).toContain('Item 20');
       expect(wrapper.text()).toContain('Item 15');
+
+      const items = wrapper.findAll('.item');
+      expect(items.length).toBeGreaterThanOrEqual(15);
+      expect(items.length).toBeLessThanOrEqual(25);
     });
 
     it('emits load event when reaching end', async () => {
@@ -228,387 +305,1702 @@ describe('virtualScroll', () => {
       expect(wrapper.emitted('load')).toBeDefined();
     });
 
-    describe('keyboard Navigation', () => {
-      it('responds to Home and End keys in vertical mode', async () => {
-        const wrapper = mount(VirtualScroll, {
-          props: { itemSize: 50, items: mockItems },
-        });
-        await nextTick();
-        const container = wrapper.find('.virtual-scroll-container');
-
-        await container.trigger('keydown', { key: 'End' });
-        await nextTick();
-        // item 99 at 4950. end align -> 4950 - (500 - 50) = 4500.
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(4500);
-
-        await container.trigger('keydown', { key: 'Home' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
-      });
-
-      it('responds to Arrows in vertical mode', async () => {
-        const wrapper = mount(VirtualScroll, {
-          props: { itemSize: 50, items: mockItems },
-        });
-        await nextTick();
-        const container = wrapper.find('.virtual-scroll-container');
-
-        await container.trigger('keydown', { key: 'ArrowDown' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(40); // DEFAULT_ITEM_SIZE
-
-        await container.trigger('keydown', { key: 'ArrowUp' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
+    it('handles wheel when virtual scrollbars are inactive', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems,
+          virtualScrollbar: false,
+        },
       });
+      await nextTick();
+      await wrapper.find('.virtual-scroll-container').trigger('wheel', { deltaY: 100 });
+      // should just stop programmatic scroll
+    });
 
-      it('responds to PageUp and PageDown in vertical mode', async () => {
-        const wrapper = mount(VirtualScroll, {
-          props: { itemSize: 50, items: mockItems },
-        });
-        await nextTick();
-        const container = wrapper.find('.virtual-scroll-container');
-
-        await container.trigger('keydown', { key: 'PageDown' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(500);
-
-        await container.trigger('keydown', { key: 'PageUp' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
+    it('should not enter a loop when scrolling to end with dynamic items', async () => {
+      const items = Array.from({ length: 200 }, (_, i) => ({ id: i }));
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items,
+          itemSize: 0, // dynamic
+          defaultItemSize: 40,
+        },
       });
 
-      it('responds to Home and End keys in horizontal mode', async () => {
-        const wrapper = mount(VirtualScroll, {
-          props: { direction: 'horizontal', itemSize: 100, items: mockItems },
-        });
-        await nextTick();
-        const container = wrapper.find('.virtual-scroll-container');
-
-        await container.trigger('keydown', { key: 'End' });
-        await nextTick();
-        // last item 99 at 9900. end align -> 9900 - (500 - 100) = 9500.
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(9500);
+      await nextTick();
+      await nextTick();
 
-        await container.trigger('keydown', { key: 'Home' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
-      });
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
 
-      it('responds to Arrows in horizontal mode', async () => {
-        const wrapper = mount(VirtualScroll, {
-          props: { direction: 'horizontal', itemSize: 100, items: mockItems },
-        });
-        await nextTick();
-        const container = wrapper.find('.virtual-scroll-container');
+      // Press End
+      await wrapper.trigger('keydown', { key: 'End' });
 
-        await container.trigger('keydown', { key: 'ArrowRight' });
+      // Wait for multiple ticks to let the correction logic work
+      for (let i = 0; i < 5; i++) {
         await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(40);
+      }
 
-        await container.trigger('keydown', { key: 'ArrowLeft' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
-      });
+      // Simulate items being measured differently than estimated
+      const rendered = wrapper.findAll('.virtual-scroll-item');
+      for (const item of rendered) {
+        const idx = Number(item.attributes('data-index'));
+        if (idx >= 90) {
+          triggerResize(item.element, 500, 50); // 50 instead of 40
+        }
+      }
 
-      it('responds to PageUp and PageDown in horizontal mode', async () => {
-        const wrapper = mount(VirtualScroll, {
-          props: { direction: 'horizontal', itemSize: 100, items: mockItems },
-        });
+      // Wait for corrections
+      for (let i = 0; i < 5; i++) {
         await nextTick();
-        const container = wrapper.find('.virtual-scroll-container');
+      }
 
-        await container.trigger('keydown', { key: 'PageDown' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(500);
+      const details = vs.scrollDetails;
+      // Should be at the end
+      expect(details.scrollOffset.y).toBeGreaterThanOrEqual(details.totalSize.height - details.viewportSize.height - 1);
 
-        await container.trigger('keydown', { key: 'PageUp' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
-      });
+      const scrollToIndexSpy = vi.spyOn(vs, 'scrollToIndex');
 
-      it('responds to Home and End keys in grid mode', async () => {
-        const wrapper = mount(VirtualScroll, {
-          props: {
-            columnCount: 10,
-            columnWidth: 100,
-            direction: 'both',
-            itemSize: 50,
-            items: mockItems,
-          },
-        });
-        await nextTick();
-        const container = wrapper.find('.virtual-scroll-container');
+      await nextTick();
+      await nextTick();
 
-        await container.trigger('keydown', { key: 'End' });
-        await nextTick();
-        // last row 99 at 4950. end align -> 4500.
-        // last col 9 at 900. end align -> 900 - (500 - 100) = 500.
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(4500);
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(500);
+      // Should not be calling scrollToIndex anymore
+      expect(scrollToIndexSpy).not.toHaveBeenCalled();
+    });
+  });
 
-        await container.trigger('keydown', { key: 'Home' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
+  describe('keyboard navigation', () => {
+    it('responds to home and end keys in vertical mode', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
       });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
 
-      it('responds to all Arrows in grid mode', async () => {
-        const wrapper = mount(VirtualScroll, {
-          props: {
-            columnCount: 10,
-            columnWidth: 100,
-            direction: 'both',
-            itemSize: 50,
-            items: mockItems,
-          },
-        });
-        await nextTick();
-        const container = wrapper.find('.virtual-scroll-container');
-
-        await container.trigger('keydown', { key: 'ArrowDown' });
-        await container.trigger('keydown', { key: 'ArrowRight' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(40);
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(40);
+      await container.trigger('keydown', { key: 'End' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(4500);
 
-        await container.trigger('keydown', { key: 'ArrowUp' });
-        await container.trigger('keydown', { key: 'ArrowLeft' });
-        await nextTick();
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
-        expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
-      });
+      await container.trigger('keydown', { key: 'Home' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
     });
-  });
 
-  describe('dynamic Sizing', () => {
-    it('adjusts total size when items are measured', async () => {
+    it('responds to arrows in vertical mode', async () => {
       const wrapper = mount(VirtualScroll, {
-        props: {
-          itemSize: 0,
-          items: mockItems.slice(0, 10),
-        },
+        props: { itemSize: 50, items: mockItems },
       });
       await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
 
-      expect((wrapper.find('.virtual-scroll-wrapper').element as HTMLElement).style.blockSize).toBe('400px');
-
-      const firstItem = wrapper.find('.virtual-scroll-item[data-index="0"]').element;
-      triggerResize(firstItem, 100, 100);
-      await nextTick();
+      await container.trigger('keydown', { key: 'ArrowDown' });
       await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(50);
 
-      expect((wrapper.find('.virtual-scroll-wrapper').element as HTMLElement).style.blockSize).toBe('460px');
+      await container.trigger('keydown', { key: 'ArrowUp' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
     });
 
-    it('does not allow columns to become 0 width due to 0-size measurements', async () => {
+    it('responds correctly to arrows in rtl mode', async () => {
+      const container = document.createElement('div');
+      container.setAttribute('dir', 'rtl');
+      Object.defineProperty(container, 'clientWidth', { configurable: true, value: 500 });
+      container.scrollTo = vi.fn().mockImplementation((options) => {
+        if (options.left !== undefined) {
+          Object.defineProperty(container, 'scrollLeft', { configurable: true, value: options.left, writable: true });
+        }
+        container.dispatchEvent(new Event('scroll'));
+      });
+
+      const styleSpy = vi.spyOn(window, 'getComputedStyle').mockImplementation((el) => {
+        if (el === container) {
+          return { direction: 'rtl' } as CSSStyleDeclaration;
+        }
+        return { direction: 'ltr' } as CSSStyleDeclaration;
+      });
+
       const wrapper = mount(VirtualScroll, {
         props: {
-          bufferAfter: 0,
-          bufferBefore: 0,
-          columnCount: 10,
-          defaultColumnWidth: 100,
-          direction: 'both',
-          itemSize: 50,
+          container,
+          direction: 'horizontal',
+          itemSize: 100,
           items: mockItems,
         },
-        slots: {
-          item: ({ columnRange, index }: ItemSlotProps) => h('div', {
-            'data-index': index,
-          }, [
-            ...Array.from({ length: columnRange.end - columnRange.start }, (_, i) => h('div', {
-              class: 'cell',
-              'data-col-index': columnRange.start + i,
-            })),
-          ]),
-        },
       });
 
+      await nextTick();
       await nextTick();
 
-      const initialWidth = (wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.totalSize.width;
-      expect(initialWidth).toBeGreaterThan(0);
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+      vs.updateDirection();
+      await nextTick();
+      expect(vs.isRtl).toBe(true);
 
-      // Find a cell from the first row
-      const row0 = wrapper.find('.virtual-scroll-item[data-index="0"]').element;
-      const cell0 = row0.querySelector('.cell') as HTMLElement;
-      expect(cell0).not.toBeNull();
+      const vsContainer = wrapper.find('.virtual-scroll-container');
 
-      // Simulate 0-size measurement (e.g. from removal or being hidden)
-      triggerResize(cell0, 0, 0);
+      await vsContainer.trigger('keydown', { key: 'ArrowLeft' });
+      await nextTick();
+      await nextTick();
+      expect(vs.scrollDetails.scrollOffset.x).toBeCloseTo(100, 0);
 
+      await vsContainer.trigger('keydown', { key: 'ArrowRight' });
       await nextTick();
       await nextTick();
+      expect(vs.scrollDetails.scrollOffset.x).toBeCloseTo(0, 0);
 
-      // totalWidth should NOT have decreased if we ignore 0 measurements
-      const currentWidth = (wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.totalSize.width;
-      expect(currentWidth).toBe(initialWidth);
+      styleSpy.mockRestore();
     });
 
-    it('should not shift horizontally when scrolling vertically even if measurements vary slightly', async () => {
+    it('aligns partially visible items correctly with arrows in rtl mode', async () => {
+      const container = document.createElement('div');
+      container.setAttribute('dir', 'rtl');
+      Object.defineProperty(container, 'clientWidth', { configurable: true, value: 500 });
+      container.scrollTo = vi.fn().mockImplementation((options) => {
+        if (options.left !== undefined) {
+          Object.defineProperty(container, 'scrollLeft', { configurable: true, value: options.left, writable: true });
+        }
+        container.dispatchEvent(new Event('scroll'));
+      });
+
+      const styleSpy = vi.spyOn(window, 'getComputedStyle').mockImplementation((el) => {
+        if (el === container) {
+          return { direction: 'rtl' } as CSSStyleDeclaration;
+        }
+        return { direction: 'ltr' } as CSSStyleDeclaration;
+      });
+
       const wrapper = mount(VirtualScroll, {
         props: {
-          bufferAfter: 0,
-          bufferBefore: 0,
-          columnCount: 10,
-          defaultColumnWidth: 100,
-          direction: 'both',
-          itemSize: 50,
+          container,
+          direction: 'horizontal',
+          itemSize: 100,
           items: mockItems,
         },
-        slots: {
-          item: ({ columnRange, index }: ItemSlotProps) => h('div', {
-            'data-index': index,
-          }, [
-            ...Array.from({ length: columnRange.end - columnRange.start }, (_, i) => h('div', {
-              class: 'cell',
-              'data-col-index': columnRange.start + i,
-            })),
-          ]),
-        },
       });
 
+      await nextTick();
       await nextTick();
 
-      // Initial scroll
-      expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
-
-      // Measure some columns of row 0
-      const row0 = wrapper.find('.virtual-scroll-item[data-index="0"]').element;
-      const cells0 = Array.from(row0.querySelectorAll('.cell'));
-
-      // Measure row 0 and its cells
-      triggerResize(row0, 1000, 50);
-      for (const cell of cells0) {
-        triggerResize(cell, 110, 50);
-      }
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+      vs.updateDirection();
+      await nextTick();
 
+      vs.scrollToOffset(50, null);
       await nextTick();
       await nextTick();
 
-      // Scroll down to row 20
-      const container = wrapper.find('.virtual-scroll-container');
-      const el = container.element as HTMLElement;
-      Object.defineProperty(el, 'scrollTop', { configurable: true, value: 1000, writable: true });
-      await container.trigger('scroll');
+      const vsContainer = wrapper.find('.virtual-scroll-container');
 
+      await vsContainer.trigger('keydown', { key: 'ArrowRight' });
       await nextTick();
       await nextTick();
+      expect(vs.scrollDetails.scrollOffset.x).toBeCloseTo(0, 0);
 
-      // Now row 20 is at the top. Measure its cells with slightly different width.
-      const row20 = wrapper.find('.virtual-scroll-item[data-index="20"]').element;
-      const cells20 = Array.from(row20.querySelectorAll('.cell'));
+      await wrapper.setProps({ itemSize: 150 });
+      await nextTick();
+      await nextTick();
 
-      for (const cell of cells20) {
-        triggerResize(cell, 110.1, 50);
-      }
+      expect(vs.scrollDetails.currentEndIndex).toBe(3);
 
+      await vsContainer.trigger('keydown', { key: 'ArrowLeft' });
       await nextTick();
       await nextTick();
+      expect(vs.scrollDetails.scrollOffset.x).toBeCloseTo(100, 0);
 
-      // ScrollOffset.x should STILL BE 0. It should not have shifted because of d = 0.1
-      expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
+      styleSpy.mockRestore();
     });
 
-    it('correctly aligns item 50:50 auto after measurements in dynamic grid', async () => {
+    it('scrolls to next item with arrowleft when current item is already at the left edge (rtl)', async () => {
+      const container = document.createElement('div');
+      container.setAttribute('dir', 'rtl');
+      Object.defineProperty(container, 'clientWidth', { configurable: true, value: 500 });
+      container.scrollTo = vi.fn().mockImplementation((options) => {
+        if (options.left !== undefined) {
+          Object.defineProperty(container, 'scrollLeft', { configurable: true, value: options.left, writable: true });
+        }
+        container.dispatchEvent(new Event('scroll'));
+      });
+
+      const styleSpy = vi.spyOn(window, 'getComputedStyle').mockImplementation((el) => {
+        if (el === container) {
+          return { direction: 'rtl' } as CSSStyleDeclaration;
+        }
+        return { direction: 'ltr' } as CSSStyleDeclaration;
+      });
+
       const wrapper = mount(VirtualScroll, {
         props: {
-          bufferAfter: 5,
-          bufferBefore: 5,
-          columnCount: 100,
-          defaultColumnWidth: 120,
-          defaultItemSize: 120,
-          direction: 'both',
+          container,
+          direction: 'horizontal',
+          itemSize: 100,
           items: mockItems,
         },
-        slots: {
-          item: ({ columnRange, index }: ItemSlotProps) => h('div', {
-            'data-index': index,
-          }, [
-            ...Array.from({ length: columnRange.end - columnRange.start }, (_, i) => h('div', {
-              class: 'cell',
-              'data-col-index': columnRange.start + i,
-            })),
-          ]),
-        },
       });
 
-      await nextTick();
-
-      // Jump to 50:50 auto
-      (wrapper.vm as unknown as { scrollToIndex: (r: number, c: number, a: string) => void; }).scrollToIndex(50, 50, 'auto');
       await nextTick();
       await nextTick();
 
-      // Initial scroll position (estimates)
-      // itemX = 50 * 120 = 6000. itemWidth = 120. viewport = 500.
-      // targetEnd = 6000 + 120 - 500 = 5620.
-      expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(5620);
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+      vs.updateDirection();
+      await nextTick();
 
-      // Row 50 should be rendered. Row 45 should be the first rendered row.
-      const row45El = wrapper.find('.virtual-scroll-item[data-index="45"]').element;
-      const cells45 = Array.from(row45El.querySelectorAll('.cell'));
+      vs.scrollToIndex(null, 4, { align: 'end', behavior: 'auto' });
+      await nextTick();
+      await nextTick();
 
-      // Simulate measurements for all rendered cells in row 45 as 150px
-      for (const cell of cells45) {
-        triggerResize(cell, 150, 120);
-      }
+      expect(vs.scrollDetails.currentEndColIndex).toBe(4);
+      expect(vs.scrollDetails.scrollOffset.x).toBe(0);
 
-      await nextTick();
+      const containerEl = wrapper.find('.virtual-scroll-container');
+      await containerEl.trigger('keydown', { key: 'ArrowLeft' });
       await nextTick();
       await nextTick();
 
-      // Correction should have triggered.
-      // At x=5620, rendered columns are 44..52 (inclusive).
-      // If columns 44..52 are all 150px:
-      // New itemX for col 50: 44 * 120 + 6 * 150 = 5280 + 900 = 6180.
-      // itemWidth = 150. viewport = 500.
-      // targetEnd = 6180 + 150 - 500 = 5830.
+      expect(vs.scrollDetails.scrollOffset.x).toBe(100);
+      styleSpy.mockRestore();
+    });
+
+    it('scrolls to previous item with arrowup when current item is already at the top', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      vs.scrollToIndex(2, null, { align: 'start', behavior: 'auto' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.y).toBe(100);
+
+      const container = wrapper.find('.virtual-scroll-container');
+      await container.trigger('keydown', { key: 'ArrowUp' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.y).toBe(50);
+    });
+
+    it('scrolls to next item with arrowright when current item is already at the right edge (ltr)', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { direction: 'horizontal', itemSize: 100, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      vs.scrollToIndex(4, null, { align: 'end', behavior: 'auto' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.currentEndIndex).toBe(4);
+      expect(vs.scrollDetails.scrollOffset.x).toBe(0);
+
+      const container = wrapper.find('.virtual-scroll-container');
+      await container.trigger('keydown', { key: 'ArrowRight' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.x).toBe(100);
+    });
+
+    it('scrolls to next item with arrowdown when current item is already at the bottom edge', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      vs.scrollToIndex(9, null, { align: 'end', behavior: 'auto' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.currentEndIndex).toBe(9);
+      expect(vs.scrollDetails.scrollOffset.y).toBe(0);
+
+      const container = wrapper.find('.virtual-scroll-container');
+      await container.trigger('keydown', { key: 'ArrowDown' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.y).toBe(50);
+    });
+
+    it('does not scroll with arrowdown when already at the very last item', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      vs.scrollToOffset(null, 4500, { behavior: 'auto' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.currentEndIndex).toBe(99);
+      expect(vs.scrollDetails.scrollOffset.y).toBe(4500);
+
+      const container = wrapper.find('.virtual-scroll-container');
+      await container.trigger('keydown', { key: 'ArrowDown' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.y).toBe(4500);
+    });
+
+    it('does not scroll with arrowright when already at the very last item (horizontal ltr)', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { direction: 'horizontal', itemSize: 100, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      vs.scrollToOffset(9500, null, { behavior: 'auto' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.currentEndColIndex).toBe(99);
+      expect(vs.scrollDetails.scrollOffset.x).toBe(9500);
+
+      const container = wrapper.find('.virtual-scroll-container');
+      await container.trigger('keydown', { key: 'ArrowRight' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.x).toBe(9500);
+    });
+
+    it('does not scroll with arrowleft when already at the very last item (horizontal rtl)', async () => {
+      const styleSpy = vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+        direction: 'rtl',
+      } as CSSStyleDeclaration);
+
+      const wrapper = mount(VirtualScroll, {
+        props: { direction: 'horizontal', itemSize: 100, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      vs.scrollToOffset(9500, null, { behavior: 'auto' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.currentEndColIndex).toBe(99);
+      expect(vs.scrollDetails.scrollOffset.x).toBe(9500);
+
+      const container = wrapper.find('.virtual-scroll-container');
+      await container.trigger('keydown', { key: 'ArrowLeft' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.x).toBe(9500);
+      styleSpy.mockRestore();
+    });
+
+    it('responds to pageup and pagedown in vertical mode', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
+      });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
+
+      await container.trigger('keydown', { key: 'PageDown' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(500);
+
+      await container.trigger('keydown', { key: 'PageUp' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
+    });
+
+    it('responds to home and end keys in horizontal mode', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { direction: 'horizontal', itemSize: 100, items: mockItems },
+      });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
+
+      await container.trigger('keydown', { key: 'End' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(9500);
+
+      await container.trigger('keydown', { key: 'Home' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
+    });
+
+    it('responds to arrows in horizontal mode', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { direction: 'horizontal', itemSize: 100, items: mockItems },
+      });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
+
+      await container.trigger('keydown', { key: 'ArrowRight' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(100);
+
+      await container.trigger('keydown', { key: 'ArrowLeft' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
+    });
+
+    it('responds to pageup and pagedown in horizontal mode', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { direction: 'horizontal', itemSize: 100, items: mockItems },
+      });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
+
+      await container.trigger('keydown', { key: 'PageDown' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(500);
+
+      await container.trigger('keydown', { key: 'PageUp' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
+    });
+
+    it('disables smooth scroll for large distances (home/end)', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize: 50,
+          items: Array.from({ length: 1000 }, (_, i) => ({ id: i, label: `Item ${ i }` })),
+          container: window,
+        },
+      });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
+
+      const scrollToSpy = vi.spyOn(window, 'scrollTo');
+
+      await container.trigger('keydown', { key: 'End' });
+      await nextTick();
+
+      expect(scrollToSpy).toHaveBeenCalledWith(expect.objectContaining({
+        behavior: 'auto',
+      }));
+
+      scrollToSpy.mockClear();
+      await container.trigger('keydown', { key: 'Home' });
+      await nextTick();
+
+      expect(scrollToSpy).toHaveBeenCalledWith(expect.objectContaining({
+        behavior: 'auto',
+      }));
+    });
+
+    it('responds to home and end keys in grid mode', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          columnCount: 10,
+          columnWidth: 100,
+          direction: 'both',
+          itemSize: 50,
+          items: mockItems,
+        },
+      });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
+
+      await container.trigger('keydown', { key: 'End' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(4500);
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(500);
+
+      await container.trigger('keydown', { key: 'Home' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
+    });
+
+    it('responds to all arrows in grid mode', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          columnCount: 10,
+          columnWidth: 100,
+          direction: 'both',
+          itemSize: 50,
+          items: mockItems,
+        },
+      });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
+
+      await container.trigger('keydown', { key: 'ArrowDown' });
+      await container.trigger('keydown', { key: 'ArrowRight' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(50);
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(100);
+
+      await container.trigger('keydown', { key: 'ArrowUp' });
+      await container.trigger('keydown', { key: 'ArrowLeft' });
+      await nextTick();
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.y).toBe(0);
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
+    });
+
+    it('aligns items precisely with arrow keys', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize: 100,
+          items: mockItems,
+        },
+      });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+      vs.scrollToOffset(null, 50, { behavior: 'auto' });
+      await nextTick();
+      expect(vs.scrollDetails.scrollOffset.y).toBe(50);
+
+      await container.trigger('keydown', { key: 'ArrowUp' });
+      await nextTick();
+      expect(vs.scrollDetails.scrollOffset.y).toBe(0);
+
+      await container.trigger('keydown', { key: 'ArrowDown' });
+      await nextTick();
+      expect(vs.scrollDetails.scrollOffset.y).toBe(100);
+
+      await container.trigger('keydown', { key: 'ArrowDown' });
+      await nextTick();
+      expect(vs.scrollDetails.scrollOffset.y).toBe(200);
+    });
+
+    it('aligns partially visible items at the bottom with arrow down', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      // viewport 500. item 9 ends at 500.
+      // scroll to 25. item 9 now ends at 525 (partially cut off).
+      vs.scrollToOffset(null, 25);
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.currentEndIndex).toBe(10); // item 10 is at 500-550
+
+      // item 10 is partially visible at bottom. ArrowDown should align it to end.
+      const container = wrapper.find('.virtual-scroll-container');
+      await container.trigger('keydown', { key: 'ArrowDown' });
+      await nextTick();
+      await nextTick();
+
+      // item 10 ends at 550. viewport 500. targetEnd = 550 - 500 = 50.
+      expect(vs.scrollDetails.scrollOffset.y).toBe(50);
+    });
+
+    it('aligns partially visible columns with arrowleft and arrowright in ltr', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { direction: 'horizontal', itemSize: 100, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      // Viewport 500. Scroll to 50.
+      // Item 0 (0-100) is partially visible at start.
+      // Item 5 (500-600) is partially visible at end.
+      vs.scrollToOffset(50, null);
+      await nextTick();
+      await nextTick();
+
+      const container = wrapper.find('.virtual-scroll-container');
+
+      // 1. ArrowLeft should align item 0 to start
+      await container.trigger('keydown', { key: 'ArrowLeft' });
+      await nextTick();
+      await nextTick();
+      expect(vs.scrollDetails.scrollOffset.x).toBe(0);
+
+      // Reset
+      vs.scrollToOffset(50, null);
+      await nextTick();
+      await nextTick();
+
+      // 2. ArrowRight should align item 5 to end
+      await container.trigger('keydown', { key: 'ArrowRight' });
+      await nextTick();
+      await nextTick();
+      // item 5 ends at 600. viewport 500. targetEnd = 600 - 500 = 100.
+      expect(vs.scrollDetails.scrollOffset.x).toBe(100);
+    });
+
+    it('aligns partially visible columns with arrowleft and arrowright in rtl', async () => {
+      const container = document.createElement('div');
+      container.setAttribute('dir', 'rtl');
+      Object.defineProperty(container, 'clientWidth', { configurable: true, value: 500 });
+      container.scrollTo = vi.fn().mockImplementation((options) => {
+        if (options.left !== undefined) {
+          Object.defineProperty(container, 'scrollLeft', { configurable: true, value: options.left, writable: true });
+        }
+        container.dispatchEvent(new Event('scroll'));
+      });
+
+      const styleSpy = vi.spyOn(window, 'getComputedStyle').mockImplementation((el) => {
+        if (el === container) {
+          return { direction: 'rtl' } as CSSStyleDeclaration;
+        }
+        return { direction: 'ltr' } as CSSStyleDeclaration;
+      });
+
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          container,
+          direction: 'horizontal',
+          itemSize: 100,
+          items: mockItems,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+      vs.updateDirection();
+      await nextTick();
+
+      // Viewport 500. Logical scroll 50.
+      // Item 0 (0-100) is partially visible at logical START (Right edge).
+      // Item 5 (500-600) is partially visible at logical END (Left edge).
+      vs.scrollToOffset(50, null);
+      await nextTick();
+      await nextTick();
+
+      const vsContainer = wrapper.find('.virtual-scroll-container');
+
+      // 1. ArrowRight in RTL should align item 0 to logical START
+      await vsContainer.trigger('keydown', { key: 'ArrowRight' });
+      await nextTick();
+      await nextTick();
+      expect(vs.scrollDetails.scrollOffset.x).toBe(0);
+
+      // Reset
+      vs.scrollToOffset(50, null);
+      await nextTick();
+      await nextTick();
+
+      // 2. ArrowLeft in RTL should align item 5 to logical END
+      await vsContainer.trigger('keydown', { key: 'ArrowLeft' });
+      await nextTick();
+      await nextTick();
+      // item 5 ends at 600. viewport 500. targetEnd = 600 - 500 = 100.
+      expect(vs.scrollDetails.scrollOffset.x).toBe(100);
+
+      styleSpy.mockRestore();
+    });
+
+    it('ignores vertical arrows in horizontal mode', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems,
+          direction: 'horizontal',
+        },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+      const scrollToIndexSpy = vi.spyOn(vs, 'scrollToIndex');
+
+      await wrapper.find('.virtual-scroll-container').trigger('keydown', { key: 'ArrowUp' });
+      await wrapper.find('.virtual-scroll-container').trigger('keydown', { key: 'ArrowDown' });
+
+      expect(scrollToIndexSpy).not.toHaveBeenCalled();
+    });
+
+    it('ignores horizontal arrows in vertical mode', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems,
+          direction: 'vertical',
+        },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+      const scrollToIndexSpy = vi.spyOn(vs, 'scrollToIndex');
+
+      await wrapper.find('.virtual-scroll-container').trigger('keydown', { key: 'ArrowLeft' });
+      await wrapper.find('.virtual-scroll-container').trigger('keydown', { key: 'ArrowRight' });
+
+      expect(scrollToIndexSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('dynamic sizing & measurements', () => {
+    it('adjusts total size when items are measured', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize: 0,
+          items: mockItems.slice(0, 10),
+        },
+      });
+      await nextTick();
+
+      expect((wrapper.find('.virtual-scroll-wrapper').element as HTMLElement).style.blockSize).toBe('400px');
+
+      const firstItem = wrapper.find('.virtual-scroll-item[data-index="0"]').element;
+      triggerResize(firstItem, 100, 100);
+      await nextTick();
+      await nextTick();
+
+      expect((wrapper.find('.virtual-scroll-wrapper').element as HTMLElement).style.blockSize).toBe('460px');
+    });
+
+    it('does not allow columns to become 0 width due to 0-size measurements', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          bufferAfter: 0,
+          bufferBefore: 0,
+          columnCount: 10,
+          defaultColumnWidth: 100,
+          direction: 'both',
+          itemSize: 50,
+          items: mockItems,
+        },
+        slots: {
+          item: ({ columnRange, index }: ItemSlotProps) => h('div', {
+            'data-index': index,
+          }, [
+            ...Array.from({ length: columnRange.end - columnRange.start }, (_, i) => h('div', {
+              class: 'cell',
+              'data-col-index': columnRange.start + i,
+            })),
+          ]),
+        },
+      });
+
+      await nextTick();
+
+      const initialWidth = (wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.totalSize.width;
+      expect(initialWidth).toBeGreaterThan(0);
+
+      const row0 = wrapper.find('.virtual-scroll-item[data-index="0"]').element;
+      const cell0 = row0.querySelector('.cell') as HTMLElement;
+      expect(cell0).not.toBeNull();
+
+      triggerResize(cell0, 0, 0);
+
+      await nextTick();
+      await nextTick();
+
+      const currentWidth = (wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.totalSize.width;
+      expect(currentWidth).toBe(initialWidth);
+    });
+
+    it('should not shift horizontally when scrolling vertically even if measurements vary slightly', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          bufferAfter: 0,
+          bufferBefore: 0,
+          columnCount: 10,
+          defaultColumnWidth: 100,
+          direction: 'both',
+          itemSize: 50,
+          items: mockItems,
+        },
+        slots: {
+          item: ({ columnRange, index }: ItemSlotProps) => h('div', {
+            'data-index': index,
+          }, [
+            ...Array.from({ length: columnRange.end - columnRange.start }, (_, i) => h('div', {
+              class: 'cell',
+              'data-col-index': columnRange.start + i,
+            })),
+          ]),
+        },
+      });
+
+      await nextTick();
+
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
+
+      const row0 = wrapper.find('.virtual-scroll-item[data-index="0"]').element;
+      const cells0 = Array.from(row0.querySelectorAll('.cell'));
+
+      triggerResize(row0, 1000, 50);
+      for (const cell of cells0) {
+        triggerResize(cell, 110, 50);
+      }
+
+      await nextTick();
+      await nextTick();
+
+      const container = wrapper.find('.virtual-scroll-container');
+      const el = container.element as HTMLElement;
+      Object.defineProperty(el, 'scrollTop', { configurable: true, value: 1000, writable: true });
+      await container.trigger('scroll');
+
+      await nextTick();
+      await nextTick();
+
+      const row20 = wrapper.find('.virtual-scroll-item[data-index="20"]').element;
+      const cells20 = Array.from(row20.querySelectorAll('.cell'));
+
+      for (const cell of cells20) {
+        triggerResize(cell, 110.1, 50);
+      }
+
+      await nextTick();
+      await nextTick();
+
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(0);
+    });
+
+    it('correctly aligns item 50:50 auto after measurements in dynamic grid', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          bufferAfter: 5,
+          bufferBefore: 5,
+          columnCount: 100,
+          defaultColumnWidth: 120,
+          defaultItemSize: 120,
+          direction: 'both',
+          items: mockItems,
+        },
+        slots: {
+          item: ({ columnRange, index }: ItemSlotProps) => h('div', {
+            'data-index': index,
+          }, [
+            ...Array.from({ length: columnRange.end - columnRange.start }, (_, i) => h('div', {
+              class: 'cell',
+              'data-col-index': columnRange.start + i,
+            })),
+          ]),
+        },
+      });
+
+      await nextTick();
+
+      (wrapper.vm as { scrollToIndex: (r: number, c: number, a: string) => void; }).scrollToIndex(50, 50, 'auto');
+      await nextTick();
+      await nextTick();
+
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(5620);
+
+      const row45El = wrapper.find('.virtual-scroll-item[data-index="45"]').element;
+      const cells45 = Array.from(row45El.querySelectorAll('.cell'));
+
+      for (const cell of cells45) {
+        triggerResize(cell, 150, 120);
+      }
+
+      await nextTick();
+      await nextTick();
+      await nextTick();
 
-      // wait for async correction cycle
       await new Promise((resolve) => setTimeout(resolve, 300));
       await nextTick();
 
-      expect((wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(5830);
+      expect((wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x).toBe(5830);
+    });
+
+    it('handles fallback measurement when borderboxsize is missing', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems,
+          itemSize: 0, // dynamic
+        },
+      });
+
+      await nextTick();
+      const item = wrapper.find('.virtual-scroll-item');
+
+      Object.defineProperty(item.element, 'offsetWidth', { value: 500, configurable: true });
+      Object.defineProperty(item.element, 'offsetHeight', { value: 60, configurable: true });
+
+      triggerResize(item.element, 500, 60, false);
+
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+      expect(vs.getRowHeight(0)).toBe(60);
+    });
+  });
+
+  describe('sticky elements', () => {
+    it('applies sticky styles to marked items', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize: 50,
+          items: mockItems,
+          stickyIndices: [ 0 ],
+        },
+      });
+      await nextTick();
+
+      const container = wrapper.find('.virtual-scroll-container');
+      const el = container.element as HTMLElement;
+
+      Object.defineProperty(el, 'scrollTop', { value: 100, writable: true });
+      await container.trigger('scroll');
+      await nextTick();
+      await nextTick();
+
+      const item0 = wrapper.find('.virtual-scroll-item[data-index="0"]');
+      expect(item0.classes()).toContain('virtual-scroll--sticky');
+      expect((item0.element as HTMLElement).style.insetBlockStart).toBe('0px');
+    });
+
+    it('does not gather multiple sticky items at the top', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize: 50,
+          items: mockItems,
+          stickyIndices: [ 0, 1, 2 ],
+        },
+        slots: {
+          item: (props: ItemSlotProps) => {
+            const { index, item } = props as ItemSlotProps<MockItem>;
+            return h('div', { class: 'item' }, `${ index }: ${ item.label }`);
+          },
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const container = wrapper.find('.virtual-scroll-container');
+      const el = container.element as HTMLElement;
+
+      Object.defineProperty(el, 'scrollTop', { configurable: true, value: 150, writable: true });
+      await container.trigger('scroll');
+      await nextTick();
+      await nextTick();
+
+      const item0 = wrapper.find('.virtual-scroll-item[data-index="0"]');
+      const item1 = wrapper.find('.virtual-scroll-item[data-index="1"]');
+      const item2 = wrapper.find('.virtual-scroll-item[data-index="2"]');
+
+      expect(item2.classes()).toContain('virtual-scroll--sticky');
+      expect(item1.classes()).not.toContain('virtual-scroll--sticky');
+      expect(item0.classes()).not.toContain('virtual-scroll--sticky');
+    });
+
+    it('scrolls only one item with arrowdown when sticky header is visible', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          bufferAfter: 0,
+          bufferBefore: 0,
+          itemSize: 50,
+          items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+          stickyHeader: true,
+        },
+        slots: {
+          header: () => h('div', { class: 'header' }, 'Header'),
+        },
+      });
+      await nextTick();
+
+      const header = wrapper.find('.virtual-scroll-header');
+      Object.defineProperty(header.element, 'offsetHeight', { configurable: true, value: 100 });
+      triggerResize(header.element, 500, 100);
+
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+      const container = wrapper.find('.virtual-scroll-container');
+
+      expect(vs.scrollDetails.currentEndIndex).toBe(7);
+
+      vs.scrollToOffset(null, 200);
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.currentIndex).toBe(4);
+
+      await container.trigger('keydown', { key: 'ArrowDown' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.y).toBe(250);
+    });
+  });
+
+  describe('scaling & massive lists', () => {
+    it('items should not overlap when scaling is active', async () => {
+      const itemSize = 1000;
+      const rowCount = 11000;
+      const massiveItems = Array.from({ length: rowCount }, (_, i) => ({ id: i, label: `Item ${ i }` }));
+
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize,
+          items: massiveItems,
+        },
+        slots: {
+          item: ({ index }: { index: number; }) => h('div', { class: 'item' }, `Item ${ index }`),
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const items = wrapper.findAll('.virtual-scroll-item');
+      expect(items.length).toBeGreaterThan(1);
+      expect(items.length).toBeLessThan(50);
+
+      const item0 = items[ 0 ]!.element as HTMLElement;
+      const item1 = items[ 1 ]!.element as HTMLElement;
+
+      const style0 = item0.style.transform;
+      const style1 = item1.style.transform;
+
+      const getY = (style: string) => {
+        const match = style.match(/translate\([^,]+, ([^)]+)px\)/);
+        return match ? Number.parseFloat(match[ 1 ]!) : 0;
+      };
+
+      const y0 = getY(style0);
+      const y1 = getY(style1);
+
+      const diff = Math.abs(y1 - y0);
+      expect(diff).toBeCloseTo(itemSize, 0);
+    });
+
+    it('emulates touch scroll when scaling is active', async () => {
+      const itemSize = 1000;
+      const rowCount = 11000;
+      const massiveItems = Array.from({ length: rowCount }, (_, i) => ({ id: i }));
+
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize,
+          items: massiveItems,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+      expect(vs.scaleY).toBeGreaterThan(1);
+
+      const container = wrapper.find('.virtual-scroll-container');
+      const containerEl = container.element as HTMLElement;
+
+      expect(vs.scrollDetails.scrollOffset.y).toBe(0);
+
+      containerEl.dispatchEvent(new PointerEvent('pointerdown', {
+        clientX: 0,
+        clientY: 500,
+        pointerId: 1,
+        pointerType: 'touch',
+        button: 0,
+        bubbles: true,
+      }));
+
+      containerEl.dispatchEvent(new PointerEvent('pointermove', {
+        clientX: 0,
+        clientY: 400,
+        pointerId: 1,
+        pointerType: 'touch',
+        bubbles: true,
+      }));
+
+      await vi.advanceTimersToNextFrame();
+      expect(vs.scrollDetails.scrollOffset.y).toBeCloseTo(100, 0);
+
+      containerEl.dispatchEvent(new PointerEvent('pointerup', {
+        bubbles: true,
+        pointerId: 1,
+        pointerType: 'touch',
+      }));
+    });
+
+    it('ignores pointer events when scaling is inactive', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+      expect(vs.scaleY).toBe(1);
+
+      const container = wrapper.find('.virtual-scroll-container');
+      const containerEl = container.element as HTMLElement;
+
+      const pointerDownEvent = new PointerEvent('pointerdown', { button: 0, bubbles: true, clientY: 500 });
+      containerEl.dispatchEvent(pointerDownEvent);
+
+      const scrollOffsetBefore = vs.scrollDetails.scrollOffset.y;
+      containerEl.dispatchEvent(new PointerEvent('pointermove', { bubbles: true, clientY: 400 }));
+      expect(vs.scrollDetails.scrollOffset.y).toBe(scrollOffsetBefore);
+    });
+
+    it('ignores non-primary mouse button pointerdown', async () => {
+      const massiveItems = Array.from({ length: 40001 }, (_, i) => ({ id: i }));
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 250, items: massiveItems },
+      });
+      await nextTick();
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+      expect(vs.scaleY).toBeGreaterThan(1);
+
+      const container = wrapper.find('.virtual-scroll-container');
+      const containerEl = container.element as HTMLElement;
+
+      const pointerDownEvent = new PointerEvent('pointerdown', { button: 1, bubbles: true, clientY: 500, pointerType: 'mouse' });
+      containerEl.dispatchEvent(pointerDownEvent);
+
+      const scrollOffsetBefore = vs.scrollDetails.scrollOffset.y;
+      containerEl.dispatchEvent(new PointerEvent('pointermove', { bubbles: true, clientY: 400 }));
+      expect(vs.scrollDetails.scrollOffset.y).toBe(scrollOffsetBefore);
+    });
+
+    it('ignores pointermove and pointerup when not dragging', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
+      });
+      await nextTick();
+      const container = wrapper.find('.virtual-scroll-container');
+      const containerEl = container.element as HTMLElement;
+
+      const pointerMoveEvent = new PointerEvent('pointermove', { bubbles: true, clientY: 400 });
+      containerEl.dispatchEvent(pointerMoveEvent);
+
+      const pointerUpEvent = new PointerEvent('pointerup', { bubbles: true });
+      containerEl.dispatchEvent(pointerUpEvent);
+    });
+
+    it('handles pointer-based scrolling when scaling is active', async () => {
+      const items = Array.from({ length: 11000 }, (_, i) => ({ id: i }));
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize: 1000, // 11M VU
+          items,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<unknown>;
+      expect(vs.scaleY).toBeGreaterThan(1);
+
+      const container = wrapper.find('.virtual-scroll-container');
+
+      container.element.dispatchEvent(new PointerEvent('pointerdown', { clientX: 0, clientY: 100, button: 0, pointerId: 1, bubbles: true }));
+      container.element.dispatchEvent(new PointerEvent('pointermove', { clientX: 0, clientY: 50, pointerId: 1, bubbles: true }));
+      await nextTick();
+      vi.runAllTimers(); // process requestAnimationFrame
+      await nextTick();
+
+      // Dragged 50px up.
+      expect(vs.scrollDetails.scrollOffset.y).toBe(50);
+
+      // pointerup
+      container.element.dispatchEvent(new PointerEvent('pointerup', { clientX: 0, clientY: 50, pointerId: 1, bubbles: true }));
+      await nextTick();
+    });
+
+    it('implements inertia scrolling with friction and cancellation', async () => {
+      const items = Array.from({ length: 11000 }, (_, i) => ({ id: i }));
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize: 1000,
+          items,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<unknown>;
+      const container = wrapper.find('.virtual-scroll-container');
+
+      // 1. Start inertia by swiping quickly
+      container.element.dispatchEvent(new PointerEvent('pointerdown', { clientX: 0, clientY: 400, button: 0, pointerId: 1, bubbles: true }));
+      container.element.dispatchEvent(new PointerEvent('pointermove', { clientX: 0, clientY: 300, pointerId: 1, bubbles: true }));
+      await nextTick();
+
+      // Swipe fast
+      container.element.dispatchEvent(new PointerEvent('pointerup', { clientX: 0, clientY: 200, pointerId: 1, bubbles: true }));
+      await nextTick();
+
+      // 2. Verify it continues to scroll
+      vi.advanceTimersByTime(16); // step 1
+      await nextTick();
+      const pos1 = vs.scrollDetails.scrollOffset.y;
+      expect(pos1).toBeGreaterThan(200);
+
+      vi.advanceTimersByTime(16); // step 2
+      await nextTick();
+      const pos2 = vs.scrollDetails.scrollOffset.y;
+      expect(pos2).toBeGreaterThan(pos1);
+
+      // 3. Stop inertia via stopProgrammaticScroll
+      vs.stopProgrammaticScroll();
+      vi.advanceTimersByTime(16);
+      await nextTick();
+      expect(vs.scrollDetails.scrollOffset.y).toBe(pos2);
+    });
+
+    it('prevents cross-axis drift during inertia', async () => {
+      const items = Array.from({ length: 11000 }, (_, i) => ({ id: i }));
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize: 1000,
+          columnCount: 11000,
+          columnWidth: 1000,
+          direction: 'both',
+          items,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<unknown>;
+      const container = wrapper.find('.virtual-scroll-container');
+
+      // Swipe horizontally with very small vertical component
+      container.element.dispatchEvent(new PointerEvent('pointerdown', { clientX: 400, clientY: 100, button: 0, pointerId: 1, bubbles: true }));
+      container.element.dispatchEvent(new PointerEvent('pointermove', { clientX: 300, clientY: 98, pointerId: 1, bubbles: true }));
+      await nextTick();
+      vi.runAllTimers();
+      await nextTick();
+
+      container.element.dispatchEvent(new PointerEvent('pointerup', { clientX: 200, clientY: 98, pointerId: 1, bubbles: true }));
+      await nextTick();
+
+      // Velocity Y should have been zeroed because X velocity is much higher
+      vi.advanceTimersByTime(16);
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.x).toBeGreaterThan(200);
+      expect(vs.scrollDetails.scrollOffset.y).toBe(2); // Initial deltaY was 2 (100 -> 98). No more movement.
+    });
+
+    describe('large scale rendering boundaries', () => {
+      const rowHeight = 1000;
+      const rowCount = 11000; // 11,000,000px
+      const massiveItems = Array.from({ length: rowCount }, (_, i) => ({ id: i }));
+      const viewportHeight = 500;
+
+      const variants = [
+        { name: 'plain', props: {} },
+        { name: 'sticky header', props: { stickyHeader: true }, hasHeader: true },
+        { name: 'sticky footer', props: { stickyFooter: true }, hasFooter: true },
+        { name: 'both sticky', props: { stickyHeader: true, stickyFooter: true }, hasHeader: true, hasFooter: true },
+        { name: 'plain with gap', props: {} },
+        { name: 'sticky header with gap', props: { stickyHeader: true, gap: 50 }, hasHeader: true },
+        { name: 'sticky footer with gap', props: { stickyFooter: true, gap: 50 }, hasFooter: true },
+        { name: 'both sticky with gap', props: { stickyHeader: true, stickyFooter: true, gap: 50 }, hasHeader: true, hasFooter: true },
+      ];
+
+      for (const variant of variants) {
+        describe(variant.name, () => {
+          it('renders last items when scrolled to end manually', async () => {
+            const wrapper = mount(VirtualScroll, {
+              props: {
+                items: massiveItems,
+                itemSize: rowHeight,
+                ...variant.props,
+              },
+              slots: {
+                ...(variant.hasHeader ? { header: '<div style="height: 50px">Header</div>' } : {}),
+                ...(variant.hasFooter ? { footer: '<div style="height: 50px">Footer</div>' } : {}),
+              },
+            });
+
+            await nextTick();
+            await nextTick();
+
+            const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+            const container = wrapper.find('.virtual-scroll-container');
+
+            const totalRUHeight = vs.scrollDetails.totalSize.height;
+            const maxRUOffset = totalRUHeight - vs.scrollDetails.viewportSize.height;
+            const maxScroll = virtualToDisplay(maxRUOffset, vs.componentOffset.y, vs.scaleY);
+            Object.defineProperty(container.element, 'scrollTop', { configurable: true, value: maxScroll });
+            await container.trigger('scroll');
+
+            await nextTick();
+            await nextTick();
+
+            const renderedIndices = vs.scrollDetails.items.map((i) => i.index);
+            expect(renderedIndices).toContain(rowCount - 1);
+            expect(renderedIndices).toContain(rowCount - 2);
+
+            const lastItem = vs.scrollDetails.items.find((i) => i.index === rowCount - 1)!;
+            expect(lastItem.originalY + lastItem.size.height).toBeCloseTo(vs.scrollDetails.scrollOffset.y + viewportHeight, 0);
+            expect(vs.scrollDetails.scrollOffset.y + viewportHeight).toBeCloseTo(totalRUHeight, 0);
+
+            wrapper.unmount();
+          });
+
+          it('renders last items when end key is pressed', async () => {
+            const wrapper = mount(VirtualScroll, {
+              props: {
+                items: massiveItems,
+                itemSize: rowHeight,
+                ...variant.props,
+              },
+              slots: {
+                ...(variant.hasHeader ? { header: '<div style="height: 50px">Header</div>' } : {}),
+                ...(variant.hasFooter ? { footer: '<div style="height: 50px">Footer</div>' } : {}),
+              },
+            });
+
+            await nextTick();
+            await nextTick();
+
+            const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+            const container = wrapper.find('.virtual-scroll-container');
+
+            await container.trigger('keydown', { key: 'End' });
+
+            await nextTick();
+            await nextTick();
+
+            const renderedIndices = vs.scrollDetails.items.map((i) => i.index);
+            expect(renderedIndices).toContain(rowCount - 1);
+
+            const lastItem = vs.scrollDetails.items.find((i) => i.index === rowCount - 1)!;
+            expect(lastItem.originalY + lastItem.size.height).toBeCloseTo(vs.scrollDetails.scrollOffset.y + viewportHeight, 0);
+
+            wrapper.unmount();
+          });
+
+          it('renders first items when home key is pressed after being at end', async () => {
+            const wrapper = mount(VirtualScroll, {
+              props: {
+                items: massiveItems,
+                itemSize: rowHeight,
+                ...variant.props,
+              },
+              slots: {
+                ...(variant.hasHeader ? { header: '<div style="height: 50px">Header</div>' } : {}),
+                ...(variant.hasFooter ? { footer: '<div style="height: 50px">Footer</div>' } : {}),
+              },
+            });
+
+            await nextTick();
+            await nextTick();
+
+            const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+            const container = wrapper.find('.virtual-scroll-container');
+
+            vs.scrollToIndex(rowCount - 1, null, { align: 'end', behavior: 'auto' });
+            await nextTick();
+            await nextTick();
+
+            await container.trigger('keydown', { key: 'Home' });
+            await nextTick();
+            await nextTick();
+
+            const renderedIndices = vs.scrollDetails.items.map((i) => i.index);
+            expect(renderedIndices).toContain(0);
+            expect(renderedIndices).toContain(1);
+            expect(vs.scrollDetails.scrollOffset.y).toBe(0);
+
+            wrapper.unmount();
+          });
+
+          it('renders correct items when scrollbar is at boundaries', async () => {
+            const wrapper = mount(VirtualScroll, {
+              props: {
+                items: massiveItems,
+                itemSize: rowHeight,
+                virtualScrollbar: true,
+                ...variant.props,
+              },
+              slots: {
+                ...(variant.hasHeader ? { header: '<div style="height: 50px">Header</div>' } : {}),
+                ...(variant.hasFooter ? { footer: '<div style="height: 50px">Footer</div>' } : {}),
+              },
+            });
+
+            await nextTick();
+            await nextTick();
+
+            const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+
+            const maxDisplayOffset = vs.renderedHeight - vs.scrollDetails.displayViewportSize.height;
+            vs.scrollToOffset(null, displayToVirtual(maxDisplayOffset, vs.componentOffset.y, vs.scaleY));
+
+            await nextTick();
+            await nextTick();
+
+            expect(vs.scrollDetails.items.map((i) => i.index)).toContain(rowCount - 1);
+
+            vs.scrollToOffset(null, 0);
+            await nextTick();
+            await nextTick();
+
+            expect(vs.scrollDetails.items.map((i) => i.index)).toContain(0);
+            expect(vs.scrollDetails.scrollOffset.y).toBe(0);
+
+            wrapper.unmount();
+          });
+        });
+      }
+    });
+  });
+
+  describe('virtual scrollbars', () => {
+    it('scrolls horizontally with shift + mousewheel when scaling is active', async () => {
+      const massiveColCount = 200000;
+      const massiveItems = Array.from({ length: 10 }, (_, i) => ({ id: i }));
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          columnCount: massiveColCount,
+          columnWidth: 100,
+          direction: 'both',
+          itemSize: 50,
+          items: massiveItems,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+      expect(vs.scaleX).toBeGreaterThan(1);
+
+      expect(vs.scrollDetails.scrollOffset.x).toBe(0);
+      expect(vs.scrollDetails.scrollOffset.y).toBe(0);
+
+      const wheelEvent = new WheelEvent('wheel', {
+        bubbles: true,
+        cancelable: true,
+        deltaX: 0,
+        deltaY: 100,
+        shiftKey: true,
+      });
+      wrapper.find('.virtual-scroll-container').element.dispatchEvent(wheelEvent);
+
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.x).toBeCloseTo(100, 0);
+      expect(vs.scrollDetails.scrollOffset.y).toBe(0);
+    });
+
+    it('updates thumb size when total size changes', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          itemSize: 50,
+          items: Array.from({ length: 20 }, (_, i) => ({ id: i })),
+          virtualScrollbar: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const verticalThumb = wrapper.find('.virtual-scroll-scrollbar-container .virtual-scrollbar-thumb--vertical');
+      expect(verticalThumb.exists()).toBe(true);
+      expect((verticalThumb.element as HTMLElement).style.blockSize).toBe('50%');
+
+      await wrapper.setProps({
+        items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+      });
+
+      await nextTick();
+      await nextTick();
+      await nextTick();
+
+      expect((verticalThumb.element as HTMLElement).style.blockSize).toBe('10%');
+
+      await wrapper.setProps({
+        items: Array.from({ length: 1000 }, (_, i) => ({ id: i })),
+      });
 
-      // Check if it's fully visible
-      const offset = (wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.scrollOffset.x;
-      const viewportWidth = (wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; }).scrollDetails.viewportSize.width;
-      const itemX = 6180;
-      const itemWidth = 150;
+      await nextTick();
+      await nextTick();
+      await nextTick();
 
-      expect(itemX).toBeGreaterThanOrEqual(offset);
-      expect(itemX + itemWidth).toBeLessThanOrEqual(offset + viewportWidth);
+      expect((verticalThumb.element as HTMLElement).style.blockSize).toBe('6.4%');
     });
-  });
 
-  describe('sticky Items', () => {
-    it('applies sticky styles to marked items', async () => {
+    it('scrolls when clicking on vertical scrollbar track', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
           itemSize: 50,
-          items: mockItems,
-          stickyIndices: [ 0 ],
+          items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+          virtualScrollbar: true,
         },
       });
+
+      await nextTick();
       await nextTick();
 
-      const container = wrapper.find('.virtual-scroll-container');
-      const el = container.element as HTMLElement;
+      const track = wrapper.find('.virtual-scrollbar-track--vertical');
+      expect(track.exists()).toBe(true);
 
-      Object.defineProperty(el, 'scrollTop', { value: 100, writable: true });
-      await container.trigger('scroll');
+      vi.spyOn(track.element, 'getBoundingClientRect').mockReturnValue({
+        top: 0,
+        left: 490,
+        width: 10,
+        height: 500,
+        bottom: 500,
+        right: 500,
+      } as DOMRect);
+
+      await track.trigger('mousedown', {
+        clientY: 250,
+      });
+
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+      expect(vs.scrollDetails.scrollOffset.y).toBeCloseTo(2250, 0);
+    });
+
+    it('scrolls to absolute end when clicking near the end of the vertical track', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems, virtualScrollbar: true },
+      });
       await nextTick();
       await nextTick();
 
-      const item0 = wrapper.find('.virtual-scroll-item[data-index="0"]');
-      expect(item0.classes()).toContain('virtual-scroll--sticky');
-      expect((item0.element as HTMLElement).style.insetBlockStart).toBe('0px');
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+      const track = wrapper.find('.virtual-scrollbar-track--vertical');
+
+      vi.spyOn(track.element, 'getBoundingClientRect').mockReturnValue({
+        bottom: 500,
+        height: 500,
+        left: 490,
+        right: 500,
+        top: 0,
+        width: 10,
+        x: 490,
+        y: 0,
+      } as DOMRect);
+
+      await track.trigger('mousedown', { clientY: 500 });
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.y).toBe(4500);
+    });
+
+    it('scrolls to absolute end when clicking near the end of the horizontal track', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { direction: 'horizontal', itemSize: 50, items: mockItems, virtualScrollbar: true },
+      });
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+      const track = wrapper.find('.virtual-scrollbar-track--horizontal');
+
+      vi.spyOn(track.element, 'getBoundingClientRect').mockReturnValue({
+        bottom: 500,
+        height: 10,
+        left: 0,
+        right: 500,
+        top: 490,
+        width: 500,
+        x: 0,
+        y: 490,
+      } as DOMRect);
+
+      await track.trigger('mousedown', { clientX: 500 });
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.x).toBe(4500);
+    });
+
+    it('scrolls when clicking on horizontal scrollbar track', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          direction: 'horizontal',
+          itemSize: 100,
+          items: Array.from({ length: 100 }, (_, i) => ({ id: i })),
+          virtualScrollbar: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const track = wrapper.find('.virtual-scrollbar-track--horizontal');
+      expect(track.exists()).toBe(true);
+
+      vi.spyOn(track.element, 'getBoundingClientRect').mockReturnValue({
+        top: 490,
+        left: 0,
+        width: 500,
+        height: 10,
+        bottom: 500,
+        right: 500,
+      } as DOMRect);
+
+      await track.trigger('mousedown', {
+        clientX: 250,
+      });
+
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+      expect(vs.scrollDetails.scrollOffset.x).toBeCloseTo(4750, 0);
+    });
+
+    it('calls internal scrolltooffset with infinity when scrollbar reaches the end', async () => {
+      let capturedCallback: ((offset: number) => void) | undefined;
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems, virtualScrollbar: true },
+        slots: {
+          scrollbar: (slotProps: ScrollbarSlotProps) => {
+            if (slotProps.scrollbarProps.axis === 'vertical') {
+              capturedCallback = slotProps.scrollbarProps.scrollToOffset;
+            }
+            return h('div', { class: 'captured-scrollbar' });
+          },
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+
+      triggerResize(wrapper.element as HTMLElement, 500, 500);
+      await nextTick();
+      await nextTick();
+
+      expect(vs.isHydrated).toBe(true);
+      expect(wrapper.find('.captured-scrollbar').exists()).toBe(true);
+      expect(typeof capturedCallback).toBe('function');
+
+      capturedCallback!(4500);
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.y).toBe(4500);
+    });
+
+    it('does not show horizontal scrollbar if items fit', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          direction: 'horizontal',
+          itemSize: 100,
+          items: Array.from({ length: 2 }, (_, i) => ({ id: i })),
+          virtualScrollbar: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+      expect(vs.scrollbarPropsHorizontal).toBeNull();
+    });
+
+    it('forces virtual scrollbars when virtualscrollbar prop is true', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: [ { id: 1 } ],
+          itemSize: 50,
+          virtualScrollbar: true,
+        },
+      });
+      await nextTick();
+      expect(wrapper.find('.virtual-scroll-scrollbar-container').exists()).toBe(true);
     });
   });
 
-  describe('ssr and Initial State', () => {
-    it('renders SSR range if provided', async () => {
+  describe('ssr & hydration', () => {
+    it('renders ssr range if provided', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
           itemSize: 50,
@@ -642,8 +2034,8 @@ describe('virtualScroll', () => {
           },
         },
       });
-      await nextTick(); // onMounted
-      await nextTick(); // hydration + scrollToIndex
+      await nextTick();
+      await nextTick();
       await nextTick();
       await nextTick();
       await nextTick();
@@ -651,46 +2043,32 @@ describe('virtualScroll', () => {
       expect(wrapper.text()).toContain('Item 50');
     });
 
-    it('does not gather multiple sticky items at the top', async () => {
+    it('renders gaps correctly during initial mount/ssr', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
+          direction: 'both',
+          items: mockItems.slice(0, 10),
           itemSize: 50,
-          items: mockItems,
-          stickyIndices: [ 0, 1, 2 ],
-        },
-        slots: {
-          item: (props: ItemSlotProps) => {
-            const { index, item } = props as ItemSlotProps<MockItem>;
-            return h('div', { class: 'item' }, `${ index }: ${ item.label }`);
-          },
+          columnCount: 5,
+          columnWidth: 100,
+          gap: 10,
+          columnGap: 20,
         },
       });
 
-      await nextTick();
-      await nextTick();
-
-      const container = wrapper.find('.virtual-scroll-container');
-      const el = container.element as HTMLElement;
-
-      // Scroll past item 2 (originalY = 100). relativeScrollY = 150.
-      Object.defineProperty(el, 'scrollTop', { configurable: true, value: 150, writable: true });
-      await container.trigger('scroll');
-      await nextTick();
-      await nextTick();
-
-      // Only item 2 should be active sticky.
-      // Item 0 and 1 should have isStickyActive = false.
-      const item0 = wrapper.find('.virtual-scroll-item[data-index="0"]');
-      const item1 = wrapper.find('.virtual-scroll-item[data-index="1"]');
-      const item2 = wrapper.find('.virtual-scroll-item[data-index="2"]');
+      // Check styles immediately after mount (before hydration)
+      const vsWrapper = wrapper.find('.virtual-scroll-wrapper');
+      const vsWrapperStyle = (vsWrapper.element as HTMLElement).style;
+      expect(vsWrapperStyle.rowGap).toBe('10px');
+      expect(vsWrapperStyle.columnGap).toBe('20px');
 
-      expect(item2.classes()).toContain('virtual-scroll--sticky');
-      expect(item1.classes()).not.toContain('virtual-scroll--sticky');
-      expect(item0.classes()).not.toContain('virtual-scroll--sticky');
+      const vsItem = wrapper.find('.virtual-scroll-item');
+      const vsItemStyle = (vsItem.element as HTMLElement).style;
+      expect(vsItemStyle.columnGap).toBe('20px');
     });
   });
 
-  describe('slots and Options', () => {
+  describe('slots & custom content', () => {
     it('renders header and footer', async () => {
       const wrapper = mount(VirtualScroll, {
         props: { items: mockItems.slice(0, 1) },
@@ -713,7 +2091,7 @@ describe('virtualScroll', () => {
       expect(wrapper.text()).toContain('LOADING...');
     });
 
-    it('uses correct HTML tags', () => {
+    it('uses correct html tags', () => {
       const wrapper = mount(VirtualScroll, {
         props: {
           containerTag: 'table',
@@ -735,11 +2113,11 @@ describe('virtualScroll', () => {
       });
       await nextTick();
 
-      const vs = wrapper.vm as unknown as { scrollDetails: ScrollDetails<MockItem>; refresh: () => void; };
+      const vs = wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; refresh: () => void; };
       vs.refresh();
       await nextTick();
-      // Should not crash
       expect(vs.scrollDetails.items.length).toBeGreaterThan(0);
+      expect(vs.scrollDetails.items.length).toBeLessThan(50);
     });
 
     it('handles sticky header and footer measurements', async () => {
@@ -757,16 +2135,234 @@ describe('virtualScroll', () => {
       await nextTick();
     });
 
-    it('works with window as container', async () => {
+    it('accounts for sticky header and footer in scroll padding', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
-          container: window,
-          itemSize: 50,
           items: mockItems,
+          itemSize: 50,
+          stickyHeader: true,
+        },
+        slots: {
+          header: () => h('div', { class: 'header', style: 'height: 40px' }, 'HEADER'),
         },
       });
+
       await nextTick();
-      expect(wrapper.classes()).toContain('virtual-scroll--window');
+      await nextTick();
+
+      const vs = wrapper.vm as { scrollDetails: ScrollDetails<MockItem>; };
+      expect(vs.scrollDetails.totalSize.height).toBeGreaterThan(0);
+    });
+
+    it('resets measured padding when header/footer is removed', async () => {
+      const TestComponent = {
+        components: { VirtualScroll },
+        props: [ 'showHeader', 'showFooter' ],
+        template: `
+          <VirtualScroll :itemSize="50" :items="items">
+            <template v-if="showHeader" #header>
+              <div class="header" style="height: 100px">HEADER</div>
+            </template>
+            <template v-if="showFooter" #footer>
+              <div class="footer" style="height: 100px">FOOTER</div>
+            </template>
+          </VirtualScroll>
+        `,
+        data() {
+          return { items: Array.from({ length: 10 }, (_, i) => ({ id: i })) };
+        },
+      };
+
+      const wrapper = mount(TestComponent, {
+        props: {
+          showHeader: true,
+          showFooter: true,
+        },
+      });
+
+      await nextTick();
+
+      const vs = wrapper.findComponent(VirtualScroll as unknown as DefineComponent).vm as unknown as VirtualScrollInstance<MockItem>;
+
+      const headerEl = wrapper.find('.virtual-scroll-header').element as HTMLElement;
+      const footerEl = wrapper.find('.virtual-scroll-footer').element as HTMLElement;
+
+      Object.defineProperty(headerEl, 'offsetHeight', { configurable: true, value: 100 });
+      Object.defineProperty(footerEl, 'offsetHeight', { configurable: true, value: 100 });
+
+      triggerResize(headerEl, 500, 100);
+      triggerResize(footerEl, 500, 100);
+
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.totalSize.height).toBe(700);
+
+      await wrapper.setProps({ showHeader: false });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.totalSize.height).toBe(600);
+
+      await wrapper.setProps({ showFooter: false });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.totalSize.height).toBe(500);
+    });
+  });
+
+  describe('dynamic list changes', () => {
+    it('clamps scroll position when items count decreases (with scaling)', async () => {
+      const items = ref(Array.from({ length: 11000 }, (_, i) => ({ id: i })));
+      const wrapper = mount({
+        components: { VirtualScroll },
+        setup() {
+          return { items };
+        },
+        template: '<VirtualScroll :items="items" :item-size="1000" style="height: 500px" />',
+      });
+      await nextTick();
+      await nextTick();
+      const vs = wrapper.findComponent(VirtualScroll as unknown as VueWrapper).vm as VirtualScrollInstance<{ id: number; }>;
+
+      expect(vs.scaleY).toBeGreaterThan(1);
+
+      vs.scrollToIndex(10500, null, { align: 'start', behavior: 'auto' });
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.y).toBe(10500000);
+
+      items.value = Array.from({ length: 1000 }, (_, i) => ({ id: i }));
+      await nextTick();
+      await nextTick();
+
+      expect(vs.scrollDetails.scrollOffset.y).toBeLessThanOrEqual(1000000 - 500);
+    });
+
+    it('syncs display scroll position when total height changes (with scaling)', async () => {
+      const items = ref(Array.from({ length: 30000 }, (_, i) => ({ id: i })));
+      const wrapper = mount({
+        components: { VirtualScroll },
+        setup() {
+          return { items };
+        },
+        template: '<VirtualScroll :items="items" :item-size="1000" style="height: 500px" />',
+      });
+      await nextTick();
+      await nextTick();
+      const vs = wrapper.findComponent(VirtualScroll as unknown as VueWrapper).vm as unknown as VirtualScrollInstance<{ id: number; }>;
+
+      vs.scrollToOffset(null, 10000000);
+      await nextTick();
+      await nextTick();
+
+      const initialDisplayScroll = (wrapper.find('.virtual-scroll-container').element as HTMLElement).scrollTop;
+
+      items.value = Array.from({ length: 40000 }, (_, i) => ({ id: i }));
+      await nextTick();
+      await nextTick();
+
+      const newDisplayScroll = (wrapper.find('.virtual-scroll-container').element as HTMLElement).scrollTop;
+      expect(newDisplayScroll).not.toBe(initialDisplayScroll);
+      expect(vs.scrollDetails.scrollOffset.y).toBeCloseTo(10000000, 0);
+    });
+
+    it('updates pending scroll index when items are prepended in a dynamic list', async () => {
+      const items = ref(Array.from({ length: 50 }, (_, i) => ({ id: i })));
+      const wrapper = mount({
+        components: { VirtualScroll },
+        setup() {
+          return { items };
+        },
+        template: '<VirtualScroll :items="items" :item-size="50" restore-scroll-on-prepend style="height: 200px" />',
+      });
+
+      await nextTick();
+      await nextTick();
+      await nextTick();
+
+      const vs = wrapper.findComponent(VirtualScroll as unknown as VueWrapper).vm as unknown as VirtualScrollInstance<{ id: number; }>;
+
+      expect(vs.isHydrated).toBe(true);
+
+      vs.scrollToIndex(10, null, { behavior: 'smooth', align: 'start' });
+      await nextTick();
+      await nextTick();
+
+      items.value = [ { id: -2 }, { id: -1 }, ...items.value ];
+
+      for (let i = 0; i < 15; i++) {
+        await nextTick();
+      }
+
+      expect(vs.scrollDetails.scrollOffset.y).toBeCloseTo(600, 0);
+    });
+
+    it('recycles items and maintains a small rendered item count', async () => {
+      const items = Array.from({ length: 1000 }, (_, i) => ({ id: i }));
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items,
+          itemSize: 50,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      expect(wrapper.findAll('.virtual-scroll-item').length).toBe(15);
+
+      const vs = wrapper.vm as unknown as VirtualScrollInstance<{ id: number; }>;
+
+      vs.scrollToOffset(null, 5000, { behavior: 'auto' });
+      await nextTick();
+      await nextTick();
+
+      expect(wrapper.findAll('.virtual-scroll-item').length).toBe(20);
+
+      vs.scrollToOffset(null, 49500, { behavior: 'auto' });
+      await nextTick();
+      await nextTick();
+
+      expect(wrapper.findAll('.virtual-scroll-item').length).toBe(15);
+    });
+
+    describe('table virtualization', () => {
+      it('correctly virtualizes when using table tags and constrained height', async () => {
+        const items = Array.from({ length: 1000 }, (_, i) => ({ id: i }));
+        const wrapper = mount(VirtualScroll, {
+          props: {
+            items,
+            itemSize: 40,
+            containerTag: 'table',
+            wrapperTag: 'tbody',
+            itemTag: 'tr',
+            style: { height: '400px', display: 'block' },
+          },
+          slots: {
+            item: '<td class="item">{{ index }}</td>',
+          },
+        });
+
+        await nextTick();
+        // Since it's mounted in JSDOM, we need to mock clientHeight/clientWidth if they are 0
+        const el = wrapper.element as HTMLElement;
+        Object.defineProperty(el, 'clientHeight', { value: 400, configurable: true });
+        Object.defineProperty(el, 'clientWidth', { value: 800, configurable: true });
+
+        // Trigger resize observation
+        const vs = wrapper.vm as unknown as VirtualScrollInstance<MockItem>;
+        vs.refresh();
+        await nextTick();
+        await nextTick();
+
+        // 400px height / 40px itemSize = 10 items + buffer
+        const renderedCount = wrapper.findAll('tr.virtual-scroll-item').length;
+        expect(renderedCount).toBeLessThan(30);
+        expect(renderedCount).toBeGreaterThan(10);
+      });
     });
   });
 });