Scroll directive

The v-scroll directive allows you to provide callbacks when the window, specified target or element itself (with .self modifier) is scrolled.

API

Examples

Options

Self

v-scroll targets the window by default but can also watch the element it’s being bound to. In the following example we use the self modifier, v-scroll.self, to watch the v-card element specifically. This causes the method onScroll to invoke as you scroll the card contents; incrementing the counter.

v-scroll/option-self.vue

Target

For a more fine tuned approach, you can designate the target to bind the scroll event listener.

v-scroll/option-target.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.