Can I check when div comes into view?

If I have a long page, how do I check when a div comes into the view(scrolling up), or even better when the div is in the middle or in top of the view?

For example.
Lets say I have a div that is 100% wide and 100px high, how can I then run a function when the div is in the middle of the view? Or at the top, lets say 10 px below the navbar?

Thanks.

You can use this lib.
pretty easy to use.

https://wowjs.uk/

<script src="js/wow.min.js"></script>
var wow = new WOW(
  {
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    }
  }
);
wow.init();

and in your page content

<div class="wow">
  Content to Reveal Here
</div>

its used to display animations when the div appear in the screen, bu change it to your needs.

i never use it with f7.

EDIT:
Just notice is deprecated :confused: you can use it.

but…

JS Events

AOS dispatches two events on document: aos:in and aos:out whenever any element animates in or out, so that you can do extra stuff in JS:

document.addEventListener(‘aos:in’, ({ detail }) => { console.log(‘animated in’, detail); }); document.addEventListener(‘aos:out’, ({ detail }) => { console.log(‘animated out’, detail); });

Thanks, but I want to run a function when a div comes into the view, not an animation.
And I thought that framework7 had some function that checks that perhaps?

But I will use the “animate on scroll” script for other stuff though :slight_smile:

There is no anything like this in F7. But you can try this API https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API

1 Like

Thanks Vladimir, I testing to do it with https://github.com/michalsnik/aos and it suppose to work with that.

1 Like