• notice
  • Congratulations on the launch of the Sought Tech site

How to create custom scroll events in Vue

Handle scrolling custom . Below is an example of a Vue instance that prints the current value window.scrollY. Scroll down and the values below should increase.

Scroll and Watch

window.scrollYvalue: {{ value }}

Below is the JavaScript code. Call Vue.directive('scroll')Register a v-scrolldirective that you can use in HTML templates. and binding.valuecontains the computed value v-scrollproperty. In the following cases, binding.valuepoint to the handleScroll()method .

Vue.directive('scroll', {
 inserted: function (el, binding) {
   const onScrollCallback = binding.value;
   window.addEventListener('scroll', () => onScrollCallback());
 }});// main appnew Vue({
 el: '#app',
 data: {
   value: 0
 methods: {
   handleScroll: function() {
     this.value = window.scrollY;

Below is the HTML template. Note v-scrollmust be a function.

 <h1>Scroll and Watch</h1>
 <div v-scroll="handleScroll">
   <p>The value of <code>window.scrollY</code>: {{ value }}!</p>


Technical otaku

Sought technology together

Related Topic


Leave a Reply