How to Use bind:scrollY in Svelte for Scroll Position Binding

In Svelte, you can use bind:scrollY on a scrollable element to bind its vertical scroll position to a variable. This allows your component to reactively track and respond to scroll changes without manual event listeners.

Syntax

The bind:scrollY directive binds the vertical scroll position of an element to a variable in your component. When the user scrolls vertically, the variable updates automatically.

Syntax parts:

• bind:scrollY={variable}: Binds the element's vertical scroll position to variable.
• variable: A number that holds the current vertical scroll offset in pixels.

svelte

<div bind:scrollY={scrollY} style="overflow-y: auto; height: 100px;">
  <!-- scrollable content -->
</div>

<script>
  let scrollY = 0;
</script>

Example

This example shows a scrollable box with text. The vertical scroll position is bound to scrollY. The current scroll position is displayed and updates as you scroll.

svelte

<script>
  let scrollY = 0;
</script>

<style>
  .scroll-box {
    height: 120px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

<div class="scroll-box" bind:scrollY={scrollY} aria-label="Scrollable content">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
  <p>Line 6</p>
  <p>Line 7</p>
  <p>Line 8</p>
  <p>Line 9</p>
  <p>Line 10</p>
</div>

<p>Current vertical scroll position: {scrollY}px</p>

Output

A scrollable box with 10 lines of text and below it the text: "Current vertical scroll position: 0px" that updates as you scroll vertically.

Common Pitfalls

Common mistakes when using bind:scrollY include:

• Not setting overflow-y: auto or a fixed height on the element, so it doesn't scroll.
• Binding scrollY to a variable but not initializing it, which can cause errors.
• Trying to use bind:scrollY on non-scrollable elements like window or body (it only works on scrollable elements).

Correct usage requires a scrollable container with vertical overflow enabled.

svelte

<!-- Wrong: no scrollable container -->
<div bind:scrollY={scrollY}>
  Content that does not scroll
</div>

<script>
  let scrollY = 0;
</script>

<!-- Right: scrollable container -->
<div style="height: 100px; overflow-y: auto;" bind:scrollY={scrollY}>
  Scrollable content
</div>

Quick Reference

Tips for using bind:scrollY:

• Use on elements with vertical scrolling enabled (overflow-y: auto or scroll).
• Bind to a let variable initialized to 0.
• Use the variable to reactively update UI based on scroll position.
• Works only for vertical scroll, not horizontal.
• Ensure accessibility by adding aria-label or semantic roles.

Key Takeaways

Use bind:scrollY on scrollable elements to track vertical scroll position reactively.

Always set a fixed height and overflow-y: auto on the element to enable scrolling.

Initialize the bound variable to zero to avoid errors and track scroll from the top.

The bound variable updates automatically as the user scrolls vertically.

This binding works only on scrollable containers, not on the window or body elements.