Fire event on Scrolling Vue.js overflow:auto height:100vh - vue.js

Question

Hi I have problem firing event when I scroll. I want event to fire when I scroll menu and not whole page. If you look at console, and disable overflow and height in CSS for #app, event will fire. Please check link.

Answer 1

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.

Answer 2

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);
}
...