元素移动后的回调答案

【问题标题】：Callback after element moved元素移动后的回调
【发布时间】：2017-03-14 08:43:31
【问题描述】：

我有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。我怎样才能检测到这种情况并在发生这种情况时调用回调函数。

【问题讨论】：

请在问题本身的minimal reproducible example 中提供所有相关代码，而不仅仅是在第三方网站上。
@MikeMcCaughan 先生，我添加了部分代码。

标签： javascript jquery velocity.js

【解决方案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

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

【讨论】：

我已经根据您的问题更新了我的答案并提供了演示

【解决方案2】：

将scroll eventListener 添加到列表的父元素（我相信在您的情况下是participants-holder），并在其中检查自上次检查以来是否移动了正确数量的像素。存储当前位置，并将其与您上次移动所需的量进行比较。

希望有帮助！

【讨论】：

这是个好主意，与我的任务相关，但“滚动”事件不会影响。我正在使用 css 转换来移动列表