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, '');
来自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();
    }
}

演示应用于＆＃39;转到＆＃39;仅限按钮：http://codepen.io/anon/pen/yMXwgd?editors=1010

请注意，当声音运行得太快时声音就会消失，但可以通过几种不同的方式处理。

元素移动后的回调

2 个答案: