javascript - 如何将 Vivus 侦听器附加到 div 的滚动条上？

Question

我有一个 div，overflow: scroll里面的 svgs 应该在滚动时动画，但是它们只在正文（文档）中动画，如果我在 div 内向下滚动，它不会触发。

我试图在滚动时触发Vivus，但每次我向下或向上滚动时它都会动画。

$('#div-scrollable').scroll(function () {
    new Vivus(document.querySelector('#svg'),{duration: 50});
});

我想在第一次在 div 内向下滚动时为 svg 设置动画。

jsFiddle- 默认
jsFiddle- 滚动功能

Answer 1

设置一个标志就足以处理动画的发生。

首先，将您的CSS更改为 overflow-y: scroll;如下所示

#div-scrollable {
  width: 500px;
  max-height: 300px;
  overflow-y: scroll;
  border: 1px solid gray;
}

然后，使用以下脚本

flag = true;
$('#div-scrollable').scroll(function () {
    var DistanceFromBottom = Math.floor($("#div-scrollable")[0].scrollTop - ($("#div-scrollable")[0].scrollHeight - $("#div-scrollable").height()));
    if(-1 <= DistanceFromBottom && DistanceFromBottom <= 1 && flag){
        flag = false;
   }
   if(flag) new Vivus(document.querySelector('svg'),{duration: 50});

});

我在你的 jsfiddle 上工作并测试了它，它应该可以工作。让我知道是否还有任何问题。