javascript - 捕捉到锚点动画

Question

我正在使用一个很棒的插件，当在指定的邻近范围内滚动时，它会捕捉到一个锚点。但是，我想为此效果添加动画，但似乎无法使其正常工作。

这是我能想到的最好的代码：

<script type="text/javascript">
    $(document).ready(function() {
      $(document).scrollsnap({
        snaps: '.snap',
        proximity: 200,
        }, 300,"easeInOutExpo");
    });
</script>

我怎样才能使这项工作？

Answer 1

查看代码，只要您使用元素而不是文档本身实例化插件，它似乎就会尝试为 snap 设置动画：

$(scrollingEl).animate({scrollTop: (matchingEl.offsetTop + settings.offset)}, 200);

因此，我建议使用对页面顶级元素的引用来实例化它。

从上面可以看出，持续时间和缓动是硬编码的，但是修改插件代码以允许您在需要时通过插件设置动态设置这些属性很容易。