Events and Calls using Locomotive Scroll JS

user_4215679 0
Viewed 9995

I am using locomotive scroll (https://github.com/locomotivemtl/locomotive-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!

smooth-scrolling jquery javascript
3 Answers

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!

user_42156790

The returned data is accessible via callback, so

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

will return testEvent1 (or testEvent2) in your case.

user_138459610 
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);
});
user_112655420
Related