javascript - 元素移动后的回调

Question

我有list that scrolls up using velocity 。我想每次都播放声音，列表中第一个可见的项目向上滚动。

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

当每个元素或整个列表向上滚动特定像素(例如 62px)时，如何处理事件或跟踪更改。我怎样才能检测到这一点并在发生这种情况时调用回调函数。

Answer 1

您可以使用类似的方法找到当前的TranslateY+this.container.style.transform.replace(/[^0-9.]/g, '');
来自https://stackoverflow.com/a/42267490/1544886 ，并将其与之前的值加上偏移量进行比较。

在 Roulette 类中添加 this.prevTranslatePos = 0.0; 用于存储旧值。

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

演示仅适用于“转到”按钮:http://codepen.io/anon/pen/yMXwgd?editors=1010

请注意，当声音运行得太快时，声音会被切断，但这可以通过几种不同的方式来处理。