---
title: v-scroll directive
related:
  - title: v-scroll-fire directive
    path: scroll-fire.md
  - title: Scroll Observer
    path: ../vue-components/scroll-observer.md
  - title: useScroll composable
    path: ../vue-composables/use-scroll.md
---
This is a Vue directive which takes one parameter (a Function) and fires when user scrolls the page containing that DOM node.

> [!NOTE]
>
> - One alternative to using this directive is to place a [QScrollObserver](../vue-components/scroll-observer.md) component on your page, or to call the [useScroll](../vue-composables/use-scroll.md) composable from your setup code.
> - There is one more scrolling-related directive available called [Scroll Fire](scroll-fire.md).

## Scroll API

### Directive Value

- `value` (Function, optional)
  Function to call when scrolling occurs (use undefined to disable)
  Function signature: `(verticalScrollPosition?: number, horizontalScrollPosition?: number) => void`
  Examples:
    - `(verticalScrollPosition, horizontalScrollPosition) => { /* ... */ }`
  Params:
    - `verticalScrollPosition` (number, optional)
      Scroll offset from top
    - `horizontalScrollPosition` (number, optional)
      Scroll offset from left

## Usage

```html
<template>
  ...
  <div v-scroll="onScroll">...</div>
  ...
</template>

<script setup>
  function onScroll(position) {
    // when this method is invoked then it means user
    // has scrolled the page to `position`
    //
    // `position` is an Integer designating the current
    // scroll position in pixels.
  }
</script>
```

```html
<template>
  ...
  <div v-scroll="onScroll">...</div>
  ...
</template>

<script setup>
  import { debounce } from 'quasar'

  const onScroll = debounce(position => {
    // when this method is invoked then it means user
    // has scrolled the page to `position`
    //
    // `position` is an Integer designating the current
    // scroll position in pixels.
  }, 200) // debounce for 200ms
</script>
```

### Determining Scrolling Container

Please read [here](../vue-components/scroll-observer.md#determining-scrolling-container) about how Quasar determines the container to attach scrolling events to.