Callback after element moved

Question

I have list that scrolls up using velocity. I want to play sound each time, first visible item of the list scrolled up.

<div class="viewport" data-winner="">
  <ul class="participants-holder container" id="ph">
    <li>...<li> //many li elements
  </ul>
</div>

moveToEl(name) {
    ...
        $(container).velocity({
            translateY: -(offsetToScroll)+'px'
        }, {
            duration: 15000,
            easing: [.74,0,.26,1],
            complete: (el) => {
                ...
                // complete animation callback

            },
            progress: (els, complete, remaining, start, tweenVal) => {
                console.log(Math.floor(complete * 100) + '%')
                // I think some check should do during progress animation
            }
        })
}

How to handle event or track changes when each element or entire list are scrolled up by certain pixels, for instance 62px. How can I detect this and call callback function on this happened.

Please provide all relevant code in an [mcve] in the question itself, not only on a third-party site. — Heretic Monkey, Mar 13 '17 at 22:08

score 0 · Answer 1 · answered Mar 13 '17 at 22:10

0

Add a scroll eventListener to the parent element of the list (I believe it's participants-holder in your case), and within that do a check for whether the right amount of pixels have moved since the last check. Store the current position, and compare it to the last time you moved the desired amount.

Hope that helps!

answered Mar 13 '17 at 22:10

Pabs123

3,385
13
29

It's nice idea and relevant to my task but 'scroll' event doesn't affects. I'm using css transform to move list – David Mar 13 '17 at 22:52

score 0 · Accepted Answer · edited May 23 '17 at 10:31

You can find the current TranslateY using something like +this.container.style.transform.replace(/[^0-9.]/g, '');
from https://stackoverflow.com/a/42267490/1544886, and compare it to the previous value plus an offset.

In the Roulette class add this.prevTranslatePos = 0.0; for storing the old value.

progress: (els, complete, remaining, start) => {
    // from https://stackoverflow.com/a/42267490/1544886
    var translatePos = +this.container.style.transform.replace(/[^0-9.]/g, '');

    if (translatePos >= (this.prevTranslatePos + 62))
    { 
        //console.log(translatePos, this.prevTranslatePos);
        this.prevTranslatePos = translatePos;

        this.sound.pause();
        this.sound.currentTime = 0;
        this.sound.play();
    }
}

Demo applied to the 'Go To' button only: http://codepen.io/anon/pen/yMXwgd?editors=1010

Note that the sound cuts out when it runs too quickly, but that could be handled a few different ways.

I've updated my answer with specifics for your question and provided a demo — K Scandrett, Mar 14 '17 at 00:44

Callback after element moved

2 Answers2