javascript - Events and Calls using Locomotive Scroll JS - Stack Overflow

admin管理员组

文章数量:1347208

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

Share Improve this question Follow asked Mar 21, 2020 at 11:29 Kablooey MonsterKablooey Monster 17011 gold badge11 silver badge1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

本文标签： javascriptEvents and Calls using Locomotive Scroll JSStack Overflow