camwiegert / in-view

Get notified when a DOM element enters or exits the viewport. :eyes:

Home Page:https://camwiegert.github.io/in-view

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

.once also only called once with multiple dom elements

maxschulmeister opened this issue · comments

Hi,

thanks for the simple and awesome module.
I think the purpose of .once is to trigger something only when i comes into the viewport the first time and not if it leaves and comes into the viewport again.

Something similar to scrollReveals "once" function. But, if i bind inview to multiple dom elements, e.g. I have 3 .item divs in my dom. .once will trigger the function for all .item at the same time. I think instead it should trigger the function .once but for every single .item when it comes into the viewport.

By the way: the module also works perfectly if you dont use native scrolling and instead something like virtual-scroll, which is a great plus!

i made a workaround like this for now, but maybe you want to consider implementing it, as i assume its the way its meant to be?

inView('.category-teaser')
.on('enter', el => {
    if(!el.done) {
        // execute what should be executed only on the first entry for every el
    }
})
.on('exit', el => {
    el.done = true;
});

@max-schu Thanks for bringing this up! I mulled this over quite a bit in the original implementation. I ended up deciding that once handlers should, in fact, only be called once. Maybe this is a case for a slightly different method. Something like onceEach. I'm not sure. 😬

Maybe once should work like you say, and people can use a remove method to remove their handler after the first one is called?

I'm now also facing this issue. I really miss a onceEach method or the once method should work differently. @max-schu his logic makes sense to me.