在视口中显示元素(机车滚动)

Question

我在一个网站上使用Locomotive Scroll。我尝试实现的内容如下:当一个带有id #mysection的部分出现在视口中时，我希望出现一个图标，然后在该部分离开视口时消失。

我尝试过在文档和网络上搜索实现这一点的方法，但我不知道如何实现它。现在，我已经看到您可以通过使用以下命令在文档中启动事件：

<!-- Using jQuery events -->
<div data-scroll data-scroll-call="EVENT_NAME">Trigger</div>

然后在javascript文件中：

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

scroll.on('call', func => {
    // Using modularJS
    this.call(...func);
    // Using jQuery events
    $(document).trigger(func);
    // Or do it your own way ?
});

因此，我所做的是：

let serviceWebDigital;
let serviceGraphicDesign;
let serviceMarketing;
let serviceVideoMotion;

smoothScroll.on("call", (value, way, obj) => {
  if (value === "serviceWebDigital") {
    serviceWebDigital = TweenMax.to($(".arrow-service-1"), 1, { opacity: 1 });
  } else {
    serviceWebDigital = TweenMax.to($(".arrow-service-1"), 1, { opacity: 0 });
  }

  if (value === "serviceGraphicDesign") {
    serviceGraphicDesign = TweenMax.to($(".arrow-service-2"), 1, { opacity: 1 });
  } else {
    serviceGraphicDesign = TweenMax.to($(".arrow-service-2"), 1, { opacity: 0 });
  }

  if (value === "serviceMarketing") {
    serviceMarketing = TweenMax.to($(".arrow-service-3"), 1, { opacity: 1 });
  } else {
    serviceMarketing = TweenMax.to($(".arrow-service-3"), 1, { opacity: 0 });
  }

  if (value === "serviceVideoMotion") {
    serviceVideoMotion = TweenMax.to($(".arrow-service-4"), 1, { opacity: 1 });
  } else {
    serviceVideoMotion = TweenMax.to($(".arrow-service-4"), 1, { opacity: 0 });
  }
});

我的问题是，当元素进入视口时，箭头显示得很好。但是当我向下滚动然后向上滚动时，当部分进入视口时，箭头不再出现。我遗漏了什么？

另一个问题是，我想控制元素何时出现。现在，当div元素进入视口底部时，它们就会出现。有没有办法创造一些“延迟”？例如，当元素完全显示在视口中时，它们会出现吗？

编辑:在查看活动代码时，当元素进入视口时，火车头is-inview添加的类似乎不会在元素不在视图中时消失。这可能是这里问题的一部分..

Answer 1

要快速回答有关"is-inview“类未被删除的问题，需要在元素中包含"data-scroll-repeat”属性。

例如：<div data-scroll data-scroll-repeat>content</div>

关于何时触发的控制，我会查看data-scroll-offset="?，?“

在文档中，表示第一个是底部(当元素进入时)，第二个是顶部(当元素退出时)。可以是像素的数字，也可以是百分比。

希望这至少对你问题的一部分有所帮助。