How to call the global scroll function for all framework pages

Questions
1

I would like to know how I can call a global Scroll function for all Framework7 pages, I tried to put it inside app.vue but the function didn’t work, I can only put page by page.

My app.vue;

methods: {
contentScrolled(position) {

  var menuFooter = document.getElementById("menu-footer");

  if (position > 100) {

    menuFooter.classList.add("menu-footer-scrolled");

  } else {

    menuFooter.classList.remove("menu-footer-scrolled");

  }

},

},

mounted() {

this.$store.dispatch('Tips/consultTips');

this.$f7.$(".page-content").on("scroll", target => {

  this.contentScrolled(target.srcElement.scrollTop);

});

}

2

Try this instead:

this.$f7.$(document).on('scroll', ".page-content", target => {
3

It doesn’t work, neither on app.vue nor on other pages.

I’m using this inside mounted()

this.$f7.$(".page-content").on(“scroll”, target => {

This works within pages, but does not work globally within app.vue