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