[SOLVED] Scroll event uncatchable except home


#1

Hi there,

Trying some styling changes depending on scroll, there for i need to detect scroll which is perfectly working on home page…

$$('.page-content').on('scroll', function () { console.log("scroll"); });

However, if i open a different page (in my case path: ‘/page/slug/:slug/’, async: function (routeTo, routeFrom…), i can not catch the scroll event with .page-content or .page-current or unique #pageid .

How can i catch scroll event on other pages?


#2

SOLVED :
Copied single page component page’s scripts and added scroll event handling script to the onPageMounted…

return {
// Lifecycle Hooks
beforeCreate() {
console.log('componentBeforeCreate', this)
},
created() {
console.log('componentCreated', this)
},
beforeMount() {
console.log('componentBeforeMount', this)
},
mounted() {
console.log('componentMounted', this);
},
beforeDestroy() {
console.log('componentBeforeDestroy', this);
},
destroyed() {
console.log('componentDestroyed', this);
},
// Component Data
data: function () {
// Must return an object
return {
  name: 'Jimmy',
  age: 25,
  like: ['Tennis', 'Chess', 'Football'],
}
},
// Component Methods
methods: {
openAlert: function () {
  var self = this;
  self.$app.dialog.alert('Hello World');
},
},
// Page Events
on: {
pageMounted: function(e, page) {
  $$('#pageid').on('scroll', function () {

    console.log("scroll");
    });
},
pageInit: function(e, page) {
  console.log('pageInit', page);
},
pageBeforeIn: function(e, page) {
  console.log('pageBeforeIn', page);
},
pageAfterIn: function(e, page) {
  console.log('pageAfterIn', page);
},
pageBeforeOut: function(e, page) {
  console.log('pageBeforeOut', page);
},
pageAfterOut: function(e, page) {
  console.log('pageAfterOut', page);
},
pageBeforeRemove: function(e, page) {
  console.log('pageBeforeRemove', page);
},
}
}