vue-composable

# Event

The scroll event (opens new window).

# Parameters

import { useOnScroll } from "vue-composable";

const scroll = useOnScroll();
const scroll = useOnScroll(wait);
const scroll = useOnScroll(options, wait?);
const scroll = useOnScroll(element, options?, wait?);
Parameters Type Required Default Description
element Ref<Element> | Element false window DOM element used to track scroll position
options boolean | AddEventListenerOptions false {passive: true} Listener options
wait Number false undefined Debounce event in ms

TIP

If no element is passed it will use window to get the scroll of the page

# State

The useOnScroll function exposes the following reactive state:

import { useOnScroll } from "vue-composable";

const { scrollTop, scrollLeft } = useOnScroll();
State Type Description
scrollTop Number Scroll top position, if value is set it will call scrollTopTo
scrollLeft Number Scroll let position, if value is set it will call scrollLeftTo

# Methods

The useOnScroll function exposes the following methods:

import { useOnScroll } from "vue-composable";

const { remove, scrollTo, scrollLeftTo, scrollTopTo } = useOnScroll();
Signature Description
remove Manually removes the event listener
scrollTo Same as calling element.scrollTo() (opens new window)
scrollBy Same as calling element.scrollBy() (opens new window)
scrollIntoView Same as calling element.scrollIntoView() (opens new window)
scrollLeftTo Calls scrollTo with left argument
scrollTopTo Calls scrollTo with top argument

# Example

Scroll

top: 0

left: 0

1

2

3

4

5

6

7

8

9

10

# Code

<template>
  <div>
    Scroll
    <p>top: {{ scrollTop }}</p>
    <p>left: {{ scrollLeft }}</p>

    <div ref="elref" style="overflow:scroll;height:70px;background:gray">
      <p v-for="x in 10" :key="x">{{ x }}</p>
    </div>

    <button @click="remove">remove</button>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/composition-api";
import { useOnScroll } from "vue-composable";

export default {
  name: "on-scroll-example",
  setup(_) {
    const elref = ref(null);

    const { scrollTop, scrollLeft, remove } = useOnScroll(elref);

    return {
      elref,
      scrollTop,
      scrollLeft,
      remove,
    };
  },
};
</script>

← onOutsidePress →