merge all scroll handlers to one from all components - vue.js

Question

I'm using Vue CLI and I have these components that has a scroll event on mounted property
comp1.vue
export default{
data(){
showSearchBar : 0
},
mounted(){
const _self = this;
document.querySelectorAll('.page__content').forEach(function(el){
el.onscroll = function() {
if (el.scrollTop >= 200) {
_self.showSearchBar = 1;
}else{
_self.showSearchBar = 0;
}
}
});
}
}
comp2.vue
export default{
data(){
showUsersList : 0
},
mounted(){
const _self = this;
document.querySelectorAll('.page__content').forEach(function(el){
el.onscroll = function() {
if (el.scrollTop >= 200) {
_self.showUsersList = 1;
}else{
_self.showUsersList = 0;
}
}
});
}
}
I know only one event declaration will work if so happens I have multiple scroll handlers on single page, then I have to group them down to a single scroll event so my question is, how do I merge those handlers into one scroll event so to make all of them work? is there a way on this in Vue?

Answer 1

One of the ways you could do this, is by including the logic inside your app.vue, where you also load your <router-view> tag:
We then pass the prop down to the individual pages, where we can use it:
App.vue
<template>
<div class="page__content">
<router-view :scrolled="scrolled"/>
</div>
</template>
<script>
export default{
data(){
scrolled: false
},
mounted(){
// Its better use a vue ref here
document.querySelectorAll('.page__content').forEach((el) => {
el.onscroll = () => {
if (el.scrollTop >= 200) {
this.scrolled = true;
} else {
this.scrolled = false;
}
}
});
}
}
</script>
comp2.vue
export default{
props: {
scrolled: {
type: Boolean,
required: true,
},
},
computed: {
showUsersList() {
if(this.scrolled) {
return 1;
} else {
return 0;
}
},
},
mounted(){
}
}