Can I check when div comes into view?


#1

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.


#2

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); });


#3

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:


#4

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


#5

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