元素移动后的回调

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

向列表的父元素添加一个 scroll eventListener（我相信在你的例子中是 participants-holder），并在其中检查是否移动了正确数量的像素最后检查。存储当前位置，并将其与上次移动所需数量的位置进行比较。

希望对您有所帮助！

Answer 2

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

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

progress: (els, complete, remaining, start) => {
    // from 
    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();
    }
}

演示仅适用于 'Go To' 按钮：http://codepen.io/anon/pen/yMXwgd?editors=1010

请注意，当运行速度过快时声音会中断，但这可以通过几种不同的方式处理。

元素移动后的回调

Callback after element moved

javascript

jquery

velocity.js