如何将 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 上工作并测试了它，它应该可以工作。如果还有任何问题，请告诉我。

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

How to attach the Vivus listener to the scroll of a div?

javascript

jquery

vivus