[Vuejs]-Scroll event not working in framework7 – Vue

by

0👍

I know this is old now but i will answer for future reference, so i think the problem here is that the window is not actually scrolling as framework7 uses pages/views.
In vue the renders to 2 divs like so..

<f7-page>
  <div slot="fixed">Fixed element</div>
  <p>Page content goes here</p>
</f7-page>

<!-- Renders to: -->

<div class="page">
  <div>Fixed element</div>
  <div class="page-content">
    <p>Page content goes here</p>
  </div>
</div>

i found that its the page-content class that you want to put the eventListenter on best way to do this is Dom7 like so…

 let page = $$('.page-content')

  page.on('scroll', () => {
    console.log(page.scrollTop()) // will show page top position
    page.scrollTop(0) // will scroll to top
  })

//if you have multiple pages

  let page = $$('.page-content')
  let home = $$(page[0])
  let about = $$(page[1])

  page.on('scroll', () => {
     console.log(home.scrollTop()) //home page top position
     console.log(about.scrollTop()) //about page top position
  })

  //more options 

  page.scrollTop(position, duration, callback)
  page.scrollTo(left, top, duration, callback)

just remember to import $$ from 'Dom7'

0👍

This code retrieves all the pages from the f7 component in an array

let pages = document.querySelectorAll('.page-content');

Then to make a page scrollable, select the respective index and do:

pages[0].addEventListener('scroll', function () { console.log('is scrolling...') } );

For the same code but in a more beautiful way as we don’t want to specify the page by index:

add an id to your f7-page tag

  <f7-page name="whatever" id='myPage'>

then do this code for example in mounted:

let f7page = document.getElementById('myPage');
let scrollableDiv = f7page.querySelector('.page-content');
scrollableDiv.addEventListener('scroll', function () { console.log('is scrolling...') } );

special thanks to BiscuitmanZ’s comment for finding the underlying issue

Leave a comment