diff --git a/src/svelte/ListItem.svelte b/src/svelte/ListItem.svelte
index 666933a7..487a1716 100644
--- a/src/svelte/ListItem.svelte
+++ b/src/svelte/ListItem.svelte
@@ -2,10 +2,12 @@
   import { type Snippet, onDestroy } from "svelte";
   import { isRTLDocument, type ItemResizeObserver } from "./core";
   import { styleToString } from "./utils";
+  import type { SvelteHTMLElements } from "svelte/elements";
 
   interface Props {
     children: Snippet<[{ item: T; index: number }]>;
     item: T;
+    as: keyof SvelteHTMLElements | undefined;
     index: number;
     offset: number;
     hide: boolean;
@@ -13,8 +15,16 @@
     resizer: ItemResizeObserver;
   }
 
-  let { children, item, index, offset, hide, horizontal, resizer }: Props =
-    $props();
+  let {
+    children,
+    item,
+    as = "div",
+    index,
+    offset,
+    hide,
+    horizontal,
+    resizer,
+  }: Props = $props();
 
   let elementRef: HTMLDivElement;
 
@@ -47,6 +57,6 @@
   });
 </script>
 
-<div bind:this={elementRef} {style}>
+<svelte:element this={as} bind:this={elementRef} {style}>
   {@render children({ item, index })}
-</div>
+</svelte:element>
diff --git a/src/svelte/VList.svelte b/src/svelte/VList.svelte
index 2e9aab22..5227040f 100644
--- a/src/svelte/VList.svelte
+++ b/src/svelte/VList.svelte
@@ -1,97 +1,32 @@
 <script lang="ts" generics="T">
-  import { type Snippet, onMount, onDestroy } from "svelte";
-  import {
-    SCROLL_IDLE,
-    type StateVersion,
-    getOverscanedRange,
-    CHANGE_ITEM_LENGTH,
-    createVirtualizer,
-    FIX_SCROLL_JUMP,
-    GET_ITEM_OFFSET,
-    GET_JUMP_COUNT,
-    GET_RANGE,
-    GET_SCROLL_DIRECTION,
-    GET_SCROLL_OFFSET,
-    GET_SCROLL_SIZE,
-    GET_TOTAL_SIZE,
-    GET_VIEWPORT_SIZE,
-    IS_ITEM_HIDDEN,
-    OBSERVE_ITEM_RESIZE,
-    ON_MOUNT,
-    ON_UN_MOUNT,
-    SCROLL_BY,
-    SCROLL_TO,
-    SCROLL_TO_INDEX,
-  } from "./core";
-  import { defaultGetKey, styleToString } from "./utils";
-  import ListItem from "./ListItem.svelte";
+  import type { ComponentProps } from "svelte";
+  import { styleToString } from "./utils";
   import type { ViewportComponentAttributes } from "./types";
-
-  interface Props extends ViewportComponentAttributes {
-    /**
-     * The data items rendered by this component.
-     */
-    data: T[];
-    /**
-     * The elements renderer snippet.
-     */
-    children: Snippet<[{ item: T; index: number }]>;
-    /**
-     * Function that returns the key of an item in the list. It's recommended to specify whenever possible for performance.
-     * @default defaultGetKey (returns index of item)
-     */
-    getKey?: (data: T, index: number) => string | number;
-    /**
-     * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
-     * @defaultValue 4
-     */
-    overscan?: number;
-    /**
-     * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
-     *
-     * - If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
-     * - If set, you can opt out estimation and use the value as initial item size.
-     */
-    itemSize?: number;
-    /**
-     * While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
-     */
-    shift?: boolean;
-    /**
-     * If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
-     */
-    horizontal?: boolean;
-    /**
-     * Callback invoked whenever scroll offset changes.
-     * @param offset Current scrollTop or scrollLeft.
-     */
-    onscroll?: (offset: number) => void;
-    /**
-     * Callback invoked when scrolling stops.
-     */
-    onscrollend?: () => void;
-    /**
-     * Callback invoked when visible items range changes.
-     */
-    onrangechange?: (
-      /**
-       * The start index of viewable items.
-       */
-      startIndex: number,
-      /**
-       * The end index of viewable items.
-       */
-      endIndex: number
-    ) => void;
-  }
+  import Virtualizer from "./Virtualizer.svelte";
+
+  interface Props
+    extends Pick<
+        ComponentProps<Virtualizer<T>>,
+        | "data"
+        | "getKey"
+        | "overscan"
+        | "itemSize"
+        | "shift"
+        | "horizontal"
+        | "children"
+        | "onscroll"
+        | "onscrollend"
+        | "onrangechange"
+      >,
+      ViewportComponentAttributes {}
 
   let {
     data,
-    getKey = defaultGetKey,
-    overscan = 4,
+    getKey,
+    overscan,
     itemSize,
-    shift = false,
-    horizontal = false,
+    shift,
+    horizontal,
     children,
     onscroll,
     onscrollend,
@@ -99,107 +34,39 @@
     ...rest
   }: Props = $props();
 
-  let containerRef: HTMLDivElement | undefined = $state();
-
-  let rerender: StateVersion = $state([]);
-
-  const virtualizer = createVirtualizer(
-    data.length,
-    itemSize,
-    horizontal,
-    (v) => {
-      rerender = v;
-    },
-    (offset) => {
-      onscroll && onscroll(offset);
-    },
-    () => {
-      onscrollend && onscrollend();
-    }
-  );
-
-  let range = $derived(rerender && virtualizer[GET_RANGE]());
-  let scrollDirection = $derived(
-    rerender && virtualizer[GET_SCROLL_DIRECTION]()
-  );
-  let totalSize = $derived(rerender && virtualizer[GET_TOTAL_SIZE]());
-  let jumpCount = $derived(rerender && virtualizer[GET_JUMP_COUNT]());
-  let extendedRange = $derived(
-    getOverscanedRange(
-      range[0],
-      range[1],
-      overscan,
-      scrollDirection,
-      data.length
-    )
-  );
-
-  onMount(() => {
-    const root = containerRef!.parentElement!;
-    virtualizer[ON_MOUNT](root);
-  });
-  onDestroy(() => {
-    virtualizer[ON_UN_MOUNT]();
-  });
-
-  let prevLength = data.length;
-  $effect.pre(() => {
-    if (prevLength === data.length) return;
-    virtualizer[CHANGE_ITEM_LENGTH]((prevLength = data.length), shift);
-  });
-
-  let prevJumpCount: number | undefined;
-  $effect(() => {
-    if (prevJumpCount === jumpCount) return;
-    prevJumpCount = jumpCount;
-    virtualizer[FIX_SCROLL_JUMP]();
-  });
-
-  let prevRange: typeof range | undefined;
-  $effect(() => {
-    if (prevRange && prevRange[0] === range[0] && prevRange[1] === range[1])
-      return;
-    prevRange = range;
-    onrangechange && onrangechange(range[0], range[1]);
-  });
+  let ref: Virtualizer<T> = $state()!;
 
   /**
    * Get current scrollTop or scrollLeft.
    */
-  export const getScrollOffset = virtualizer[GET_SCROLL_OFFSET];
+  export const getScrollOffset = () => ref.getScrollOffset();
   /**
    * Get current scrollHeight or scrollWidth.
    */
-  export const getScrollSize = virtualizer[GET_SCROLL_SIZE];
+  export const getScrollSize = () => ref.getScrollSize();
   /**
    * Get current offsetHeight or offsetWidth.
    */
-  export const getViewportSize = virtualizer[GET_VIEWPORT_SIZE];
+  export const getViewportSize = () => ref.getViewportSize();
   /**
    * Scroll to the item specified by index.
    * @param index index of item
    * @param opts options
    */
-  export const scrollToIndex = virtualizer[SCROLL_TO_INDEX];
+  export const scrollToIndex = ((...args) =>
+    ref.scrollToIndex(...args)) as typeof ref.scrollToIndex;
   /**
    * Scroll to the given offset.
    * @param offset offset from start
    */
-  export const scrollTo = virtualizer[SCROLL_TO];
+  export const scrollTo = ((...args) =>
+    ref.scrollTo(...args)) as typeof ref.scrollTo;
   /**
    * Scroll by the given offset.
    * @param offset offset from current position
    */
-  export const scrollBy = virtualizer[SCROLL_BY];
-
-  let items = $derived.by(() => {
-    const [startIndex, endIndex] = extendedRange;
-    const newItems: T[] = [];
-    for (let i = startIndex, j = endIndex; i <= j; i++) {
-      newItems.push(data[i]!);
-    }
-    return newItems;
-  });
+  export const scrollBy = ((...args) =>
+    ref.scrollBy(...args)) as typeof ref.scrollBy;
 
   const viewportStyle = styleToString({
     display: horizontal ? "inline-block" : "block",
@@ -208,22 +75,6 @@
     width: "100%",
     height: "100%",
   });
-
-  const containerStyle = styleToString({
-    // contain: "content",
-    "overflow-anchor": "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
-    flex: "none", // flex style can break layout
-    position: "relative",
-    visibility: "hidden", // TODO replace with other optimization methods
-  });
-
-  let dynamicContainerStyle = $derived(
-    styleToString({
-      width: horizontal ? totalSize + "px" : "100%",
-      height: horizontal ? "100%" : totalSize + "px",
-      "pointer-events": scrollDirection !== SCROLL_IDLE ? "none" : undefined,
-    })
-  );
 </script>
 
 <!-- 
@@ -231,21 +82,17 @@
   Virtualized list component.
 -->
 <div {...rest} style={`${viewportStyle} ${rest["style"] || ""}`}>
-  <div
-    bind:this={containerRef}
-    style={`${containerStyle} ${dynamicContainerStyle}`}
-  >
-    {#each items as item, i (getKey(item, i + extendedRange[0]))}
-      {@const index = i + extendedRange[0]}
-      <ListItem
-        {children}
-        {item}
-        {index}
-        offset={rerender && virtualizer[GET_ITEM_OFFSET](index)}
-        hide={rerender && virtualizer[IS_ITEM_HIDDEN](index)}
-        {horizontal}
-        resizer={virtualizer[OBSERVE_ITEM_RESIZE]}
-      />
-    {/each}
-  </div>
+  <Virtualizer
+    bind:this={ref}
+    {data}
+    {children}
+    {getKey}
+    {overscan}
+    {itemSize}
+    {shift}
+    {horizontal}
+    {onscroll}
+    {onscrollend}
+    {onrangechange}
+  />
 </div>
diff --git a/src/svelte/Virtualizer.svelte b/src/svelte/Virtualizer.svelte
new file mode 100644
index 00000000..9a8cc41b
--- /dev/null
+++ b/src/svelte/Virtualizer.svelte
@@ -0,0 +1,276 @@
+<script lang="ts" generics="T">
+  import { type Snippet, onMount, onDestroy } from "svelte";
+  import {
+    SCROLL_IDLE,
+    type StateVersion,
+    getOverscanedRange,
+    CHANGE_ITEM_LENGTH,
+    createVirtualizer,
+    FIX_SCROLL_JUMP,
+    GET_ITEM_OFFSET,
+    GET_JUMP_COUNT,
+    GET_RANGE,
+    GET_SCROLL_DIRECTION,
+    GET_SCROLL_OFFSET,
+    GET_SCROLL_SIZE,
+    GET_TOTAL_SIZE,
+    GET_VIEWPORT_SIZE,
+    IS_ITEM_HIDDEN,
+    OBSERVE_ITEM_RESIZE,
+    ON_MOUNT,
+    ON_UN_MOUNT,
+    SCROLL_BY,
+    SCROLL_TO,
+    SCROLL_TO_INDEX,
+    CHANGE_START_MARGIN,
+    GET_START_SPACER_SIZE,
+    GET_ITEMS_LENGTH,
+  } from "./core";
+  import { defaultGetKey, styleToString } from "./utils";
+  import ListItem from "./ListItem.svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    /**
+     * The data items rendered by this component.
+     */
+    data: T[];
+    /**
+     * The elements renderer snippet.
+     */
+    children: Snippet<[{ item: T; index: number }]>;
+    /**
+     * Function that returns the key of an item in the list. It's recommended to specify whenever possible for performance.
+     * @default defaultGetKey (returns index of item)
+     */
+    getKey?: (data: T, index: number) => string | number;
+    /**
+     * Component or element type for container element.
+     * @defaultValue "div"
+     */
+    as?: keyof SvelteHTMLElements;
+    /**
+     * Component or element type for item element.
+     * @defaultValue "div"
+     */
+    item?: keyof SvelteHTMLElements;
+    /**
+     * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
+     * @defaultValue 4
+     */
+    overscan?: number;
+    /**
+     * Reference to the scrollable element. The default will get the parent element of virtualizer.
+     */
+    scrollRef?: HTMLElement;
+    /**
+     * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
+     *
+     * - If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
+     * - If set, you can opt out estimation and use the value as initial item size.
+     */
+    itemSize?: number;
+    /**
+     * While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
+     */
+    shift?: boolean;
+    /**
+     * If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
+     */
+    horizontal?: boolean;
+    /**
+     * If you put an element before virtualizer, you have to define its height with this prop.
+     */
+    startMargin?: number;
+    /**
+     * Callback invoked whenever scroll offset changes.
+     * @param offset Current scrollTop or scrollLeft.
+     */
+    onscroll?: (offset: number) => void;
+    /**
+     * Callback invoked when scrolling stops.
+     */
+    onscrollend?: () => void;
+    /**
+     * Callback invoked when visible items range changes.
+     */
+    onrangechange?: (
+      /**
+       * The start index of viewable items.
+       */
+      startIndex: number,
+      /**
+       * The end index of viewable items.
+       */
+      endIndex: number
+    ) => void;
+  }
+
+  let {
+    data,
+    getKey = defaultGetKey,
+    as = "div",
+    item: itemAs,
+    scrollRef,
+    overscan = 4,
+    itemSize,
+    shift = false,
+    horizontal = false,
+    startMargin = 0,
+    children,
+    onscroll,
+    onscrollend,
+    onrangechange,
+  }: Props = $props();
+
+  let containerRef: HTMLDivElement | undefined = $state();
+
+  let rerender: StateVersion = $state([]);
+
+  const virtualizer = createVirtualizer(
+    data.length,
+    itemSize,
+    horizontal,
+    (v) => {
+      rerender = v;
+    },
+    (offset) => {
+      onscroll && onscroll(offset);
+    },
+    () => {
+      onscrollend && onscrollend();
+    }
+  );
+
+  let range = $derived(rerender && virtualizer[GET_RANGE]());
+  let scrollDirection = $derived(
+    rerender && virtualizer[GET_SCROLL_DIRECTION]()
+  );
+  let totalSize = $derived(rerender && virtualizer[GET_TOTAL_SIZE]());
+  let jumpCount = $derived(rerender && virtualizer[GET_JUMP_COUNT]());
+  let extendedRange = $derived(
+    getOverscanedRange(
+      range[0],
+      range[1],
+      overscan,
+      scrollDirection,
+      data.length
+    )
+  );
+
+  onMount(() => {
+    if (scrollRef) {
+      virtualizer[ON_MOUNT](scrollRef);
+    } else {
+      virtualizer[ON_MOUNT](containerRef!.parentElement!);
+    }
+  });
+  onDestroy(() => {
+    virtualizer[ON_UN_MOUNT]();
+  });
+
+  $effect.pre(() => {
+    if (data.length !== virtualizer[GET_ITEMS_LENGTH]()) {
+      virtualizer[CHANGE_ITEM_LENGTH](data.length, shift);
+    }
+  });
+
+  $effect.pre(() => {
+    if (startMargin !== virtualizer[GET_START_SPACER_SIZE]()) {
+      virtualizer[CHANGE_START_MARGIN](startMargin);
+    }
+  });
+
+  let prevJumpCount: number | undefined;
+  $effect(() => {
+    if (prevJumpCount === jumpCount) return;
+    prevJumpCount = jumpCount;
+    virtualizer[FIX_SCROLL_JUMP]();
+  });
+
+  let prevRange: typeof range | undefined;
+  $effect(() => {
+    if (prevRange && prevRange[0] === range[0] && prevRange[1] === range[1])
+      return;
+    prevRange = range;
+    onrangechange && onrangechange(range[0], range[1]);
+  });
+
+  /**
+   * Get current scrollTop or scrollLeft.
+   */
+  export const getScrollOffset = virtualizer[GET_SCROLL_OFFSET];
+  /**
+   * Get current scrollHeight or scrollWidth.
+   */
+  export const getScrollSize = virtualizer[GET_SCROLL_SIZE];
+  /**
+   * Get current offsetHeight or offsetWidth.
+   */
+  export const getViewportSize = virtualizer[GET_VIEWPORT_SIZE];
+  /**
+   * Scroll to the item specified by index.
+   * @param index index of item
+   * @param opts options
+   */
+  export const scrollToIndex = virtualizer[SCROLL_TO_INDEX];
+  /**
+   * Scroll to the given offset.
+   * @param offset offset from start
+   */
+  export const scrollTo = virtualizer[SCROLL_TO];
+  /**
+   * Scroll by the given offset.
+   * @param offset offset from current position
+   */
+  export const scrollBy = virtualizer[SCROLL_BY];
+
+  let items = $derived.by(() => {
+    const [startIndex, endIndex] = extendedRange;
+    const newItems: T[] = [];
+    for (let i = startIndex, j = endIndex; i <= j; i++) {
+      newItems.push(data[i]!);
+    }
+    return newItems;
+  });
+
+  const containerStyle = styleToString({
+    // contain: "content",
+    "overflow-anchor": "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
+    flex: "none", // flex style can break layout
+    position: "relative",
+    visibility: "hidden", // TODO replace with other optimization methods
+  });
+
+  let dynamicContainerStyle = $derived(
+    styleToString({
+      width: horizontal ? totalSize + "px" : "100%",
+      height: horizontal ? "100%" : totalSize + "px",
+      "pointer-events": scrollDirection !== SCROLL_IDLE ? "none" : undefined,
+    })
+  );
+</script>
+
+<!-- 
+  @component
+  Customizable list virtualizer for advanced usage.
+-->
+<svelte:element
+  this={as}
+  bind:this={containerRef}
+  style={`${containerStyle} ${dynamicContainerStyle}`}
+>
+  {#each items as item, i (getKey(item, i + extendedRange[0]))}
+    {@const index = i + extendedRange[0]}
+    <ListItem
+      {children}
+      {item}
+      {index}
+      as={itemAs}
+      offset={rerender && virtualizer[GET_ITEM_OFFSET](index)}
+      hide={rerender && virtualizer[IS_ITEM_HIDDEN](index)}
+      {horizontal}
+      resizer={virtualizer[OBSERVE_ITEM_RESIZE]}
+    />
+  {/each}
+</svelte:element>
diff --git a/src/svelte/core.ts b/src/svelte/core.ts
index 0ddfbdd4..99b9a45c 100644
--- a/src/svelte/core.ts
+++ b/src/svelte/core.ts
@@ -7,6 +7,7 @@ import {
   getScrollSize as _getScrollSize,
   type StateVersion,
   getScrollSize,
+  ACTION_START_OFFSET_CHANGE,
 } from "../core/store";
 import { createResizer } from "../core/resizer";
 import { createScroller } from "../core/scroller";
@@ -29,13 +30,16 @@ export const GET_SCROLL_DIRECTION = 6;
 export const GET_JUMP_COUNT = 7;
 export const GET_ITEM_OFFSET = 8;
 export const IS_ITEM_HIDDEN = 9;
-export const OBSERVE_ITEM_RESIZE = 10;
-export const FIX_SCROLL_JUMP = 11;
-export const CHANGE_ITEM_LENGTH = 12;
-export const GET_SCROLL_SIZE = 13;
-export const SCROLL_TO = 14;
-export const SCROLL_BY = 15;
-export const SCROLL_TO_INDEX = 16;
+export const GET_ITEMS_LENGTH = 10;
+export const GET_START_SPACER_SIZE = 11;
+export const OBSERVE_ITEM_RESIZE = 12;
+export const FIX_SCROLL_JUMP = 13;
+export const CHANGE_ITEM_LENGTH = 14;
+export const CHANGE_START_MARGIN = 15;
+export const GET_SCROLL_SIZE = 16;
+export const SCROLL_TO = 17;
+export const SCROLL_BY = 18;
+export const SCROLL_TO_INDEX = 19;
 
 /**
  * This function is workaround for terser minification.
@@ -92,11 +96,16 @@ export const createVirtualizer = (
     [GET_JUMP_COUNT]: store._getJumpCount,
     [GET_ITEM_OFFSET]: store._getItemOffset,
     [IS_ITEM_HIDDEN]: store._isUnmeasuredItem,
+    [GET_ITEMS_LENGTH]: store._getItemsLength,
+    [GET_START_SPACER_SIZE]: store._getStartSpacerSize,
     [OBSERVE_ITEM_RESIZE]: resizer._observeItem,
     [FIX_SCROLL_JUMP]: scroller._fixScrollJump,
     [CHANGE_ITEM_LENGTH]: (len: number, shift?: boolean) => {
       store._update(ACTION_ITEMS_LENGTH_CHANGE, [len, shift]);
     },
+    [CHANGE_START_MARGIN]: (value: number) => {
+      store._update(ACTION_START_OFFSET_CHANGE, value);
+    },
     [GET_SCROLL_SIZE]: () => getScrollSize(store),
     [SCROLL_TO]: scroller._scrollTo,
     [SCROLL_BY]: scroller._scrollBy,
diff --git a/src/svelte/index.ts b/src/svelte/index.ts
index 8ca4aa37..142c8f8e 100644
--- a/src/svelte/index.ts
+++ b/src/svelte/index.ts
@@ -2,3 +2,4 @@
  * @module svelte
  */
 export { default as VList } from "./VList.svelte";
+export { default as Virtualizer } from "./Virtualizer.svelte";
diff --git a/stories/svelte/HeaderAndFooter.svelte b/stories/svelte/HeaderAndFooter.svelte
new file mode 100644
index 00000000..087b2ea7
--- /dev/null
+++ b/stories/svelte/HeaderAndFooter.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Virtualizer } from "../../src/svelte";
+
+  const sizes = [20, 40, 180, 77];
+
+  const data = Array.from({ length: 1000 }).map((_, i) => sizes[i % 4]!);
+
+  const headerHeight = 400;
+</script>
+
+<div
+  style={`
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  /* opt out browser's scroll anchoring on header/footer because it will conflict to scroll anchoring of virtualizer */
+  overflow-anchor: none;
+`}
+>
+  <div style={`background-color: burlywood; height: ${headerHeight}px;`}>
+    header
+  </div>
+  <Virtualizer {data} getKey={(_, i) => i} startMargin={headerHeight}>
+    {#snippet children({ item, index })}
+    <div
+      style={`
+        height: ${item}px;
+        background: white;
+        border-bottom: solid 1px #ccc;
+      `}
+    >
+      {index}
+    </div>
+  {/snippet}
+  </Virtualizer>
+  <div style={`background-color: steelblue; height: 600px;`}>footer</div>
+</div>
diff --git a/stories/svelte/Nested.svelte b/stories/svelte/Nested.svelte
new file mode 100644
index 00000000..4848b247
--- /dev/null
+++ b/stories/svelte/Nested.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Virtualizer } from "../../src/svelte";
+
+  const sizes = [20, 40, 180, 77];
+
+  const data = Array.from({ length: 1000 }).map((_, i) => sizes[i % 4]!);
+
+  const outerPadding = 40;
+  const innerPadding = 60;
+  let scrollRef: HTMLElement = $state();
+</script>
+
+<div
+  bind:this={scrollRef}
+  style={`
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  /* opt out browser's scroll anchoring on header/footer because it will conflict to scroll anchoring of virtualizer */
+  overflow-anchor: none;
+`}
+>
+  <div style={`background-color: burlywood; padding: ${outerPadding}px;`}>
+    <div style={`background-color: steelblue; padding: ${innerPadding}px;`}>
+      <Virtualizer
+        {data}
+        getKey={(_, i) => i}
+        {scrollRef}
+        startMargin={outerPadding + innerPadding}
+      >
+        {#snippet children({ item, index })}
+          <div
+            style={`
+              height: ${item}px;
+              background: white;
+              border-bottom: solid 1px #ccc;
+            `}
+          >
+            {index}
+          </div>
+        {/snippet}
+      </Virtualizer>
+    </div>
+  </div>
+</div>
diff --git a/stories/svelte/TableElement.svelte b/stories/svelte/TableElement.svelte
new file mode 100644
index 00000000..254bc5e6
--- /dev/null
+++ b/stories/svelte/TableElement.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Virtualizer } from "../../src/svelte";
+
+  const COLUMN_WIDTHS = [100, 200, 300, 100, 200, 300, 100, 300, 400, 200];
+
+  const data = Array.from({ length: 1000 }).map((_, i) => i);
+
+  const headerHeight = 40;
+
+  let scrollRef: HTMLElement = $state();
+</script>
+
+<div bind:this={scrollRef} style={`height: 500px; overflow: auto;`}>
+  <table>
+    <thead>
+      <tr style={`height: ${headerHeight}px`}>
+        {#each COLUMN_WIDTHS as width, index}
+          <th style={`width: ${width}px`}>Header{index}</th>
+        {/each}
+      </tr>
+    </thead>
+    <Virtualizer
+      {data}
+      getKey={(_, i) => i}
+      {scrollRef}
+      as="tbody"
+      item="tr"
+      startMargin={headerHeight}
+    >
+      {#snippet children({ item })}
+        {#each COLUMN_WIDTHS as width, index}
+          <th style={`width: ${width}px`}>{item} {index}</th>
+        {/each}
+      {/snippet}
+    </Virtualizer>
+  </table>
+</div>
diff --git a/stories/svelte/Virtualizer.stories.tsx b/stories/svelte/Virtualizer.stories.tsx
new file mode 100644
index 00000000..74980652
--- /dev/null
+++ b/stories/svelte/Virtualizer.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/svelte";
+import { Virtualizer } from "../../src/svelte";
+import HeaderAndFooterComponent from "./HeaderAndFooter.svelte";
+import NestedComponent from "./Nested.svelte";
+import TableComponent from "./TableElement.svelte";
+
+export default {
+  component: Virtualizer,
+} satisfies Meta;
+
+export const HeaderAndFooter: StoryObj = {
+  render: () => ({
+    Component: HeaderAndFooterComponent,
+  }),
+};
+
+export const Nested: StoryObj = {
+  render: () => ({
+    Component: NestedComponent,
+  }),
+};
+
+export const TableElement: StoryObj = {
+  render: () => ({
+    Component: TableComponent,
+  }),
+};