[Vuejs]-Fire event on Scrolling Vue.js overflow:auto height:100vh

by

0👍

✅

Assign id of inner div element. Let’s say longlist here.

<div id="app">
  <div id="longlist" class="some-long-list">
    <ul>
      ...
    </ul>
  </div>
</div>

Add scroll event to the longlist element. Here you should use mounted() instead of created()

new Vue({
  el: "#app",
  data: {
    list: null
  },
  methods: {
    handleScroll (event) {
      // Any code to be executed when the window is scrolled
      console.log(event)
      console.log("metallica")
    }
  },
  mounted () {
    this.list = document.getElementById('longlist')
    this.list.addEventListener('scroll', this.handleScroll);
  },
  destroyed () {
    this.list.removeEventListener('scroll', this.handleScroll);
  }
})

Also, change css to enable scrolling only inside inner div.

#app {
  background: #fff;
  border-radius: 4px;
  /* padding: 20px; */
  transition: all 0.2s;
  height: 100vh;
  /* overflow: auto; */
}

.some-long-list {
  background:red;
  width: 300px;
  margin:0px auto;
  overflow: auto;
  height: 100%;
}

Hope this could help.

0👍

You currently have this in your pen:

...
  created () {
    window.addEventListener('scroll', this.handleScroll);
  },
...

…so your event listener is attached to the whole window. Try selecting the relevant element first with something like document.getElementsByClassName('my-list')[0] or similar to attach the event listener to the element itself.

e.g.

...
created () {
    const list = document.getElementsByClassName('my-list')[0]
    list.addEventListener('scroll', this.handleScroll);
}
...

Leave a comment