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
},