[SOLVED] Infinite Scroll get current scroll position

Questions
1

Am currently using https://framework7.io/vue and I have this problem wherein I need to get a button floating once the user pass scrolling a specific element.

For some reason I only get 0 always. Below is my code

<f7-page
class="adventure-details-dashboard"
infinite
:infinite-top="true"
:infinite-distance="0"
:infinite-preloader="false"
@infinite="showMoreDetails"

My script:

 offset(el) {
  var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
},
showMoreDetails () {
  // console.log('Sample')
  var div = document.querySelector('.adventure-details-dashboard');
  var divOffset = this.offset(div);
  console.log(divOffset.left, divOffset.top);
  const self = this
  self.show_more_details = true

},
2

this:

will always be a 0.

To get the scrolling, you need to detect it on page-content element:

var pageScrollTop = this.$el.querySelector('.page-content').scrollTop;

There is also Dom7’s .offset() method that can help you:

offset(el) {
  return this.$$(el).offset(); // { returns {left, top} object }
},
3

Thanks! Tho my problem got solved by here [solved] Problem detecting the scroll event (I want to do a Scroll Indicator)