I am using lootive scroll () to create a smooth scroll effect.

I am trying to understand the events and calls they mention in the docs (see above git url).

Example HTML:

<div data-scroll data-scroll-repeat data-scroll-speed="1" data-scroll-call="testEvent1" class="block" id="block1">
   block 1
</div>

<div data-scroll data-scroll-repeat data-scroll-speed="1" data-scroll-call="testEvent2" class="block" id="block2">
   block 2
</div>

Example JS:

scroll.on('call', func => {
    console.log("block1 triggered");
});

This works and the consol log is fired but how can I separate "testEvent" 1 and "testEvent2" to fire separately?

Thank you!

I am using lootive scroll (https://github./lootivemtl/lootive-scroll) to create a smooth scroll effect.

I am trying to understand the events and calls they mention in the docs (see above git url).

Example HTML:

<div data-scroll data-scroll-repeat data-scroll-speed="1" data-scroll-call="testEvent1" class="block" id="block1">
   block 1
</div>

<div data-scroll data-scroll-repeat data-scroll-speed="1" data-scroll-call="testEvent2" class="block" id="block2">
   block 2
</div>

Example JS:

scroll.on('call', func => {
    console.log("block1 triggered");
});

This works and the consol log is fired but how can I separate "testEvent" 1 and "testEvent2" to fire separately?

Thank you!

• javascript
• jquery
• smooth-scrolling

3 Answers 3

For anyone who this may help, below is the approach I'm currently using to good effect.

//check object is in view
function checkVisible( elm, eval ) {
    eval = eval || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();   

    if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}

Grateful for finding the above code in this post: Call function on scroll only once

I then used it like this in my project:

scroll.on('call', func => {
    if (checkVisible($('#myID1'))) {
        //do something when myID1 is in view
        console.log("test myID1");
    } else if (checkVisible($('#myID2'))) {
        //do something when myID2 is in view
        console.log("test myID2");
    } else {
        // do nothing
    }
});

Might help someone. Good luck!

The returned data is accessible via callback, so

scroll.on('call', (obj) => {
  console.log(obj);
});

will return testEvent1 (or testEvent2) in your case.

scroll.on('call', func => {
    this[func]();
});

Works like a charm.
The answer @matveimug gave also works, but does not trigger an actual function, instead it passes the call as an argument.

If you want to know the element that triggered the function, you can do so like this:

scroll.on('call', (func, args, obj) => {
   this[func]();
   console.log(args);
   console.log(obj.id);
});