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

> [!TIP]
> - One alternative to using this directive is to place a [QScrollObserver](../vue-components/scroll-observer.md) component on your page.
> - 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) => unknown`
  Examples:
    - `(verticalScrollPosition, horizontalScrollPosition) => { /* ... */ }`

## 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.