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

Question

我正在使用 Locomotive Scroll在一个网站上。我试图实现的是以下内容:当 ID 为 #mysection 的部分时在视口(viewport)中，我希望出现一个图标，然后在该部分超出视口(viewport)时消失。

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

<!-- 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 });
  }
});

我的问题是当元素进入视口(viewport)时，箭头看起来很好。但是当我向下然后向上滚动时，当部分进入视口(viewport)时，箭头不再出现。我错过了什么？

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

编辑 :
查看实时代码时，似乎是机车添加的类 is-inview当元素进入视口(viewport)时，元素不在视野内时不会消失。这可能是这里问题的一部分..

Answer 1

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

例如:<div data-scroll data-scroll-repeat>content</div>
关于控制何时触发，我会查看 data-scroll-offset="?, ?"

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

希望至少对您的部分问题有所帮助。