javascript - Scrollmagic - 滚动时背景颜色未正确更改

Question

我在使用 scrollmagic 时遇到问题，因为我试图在 scrollmagic 中创建自然部分删除的演示，但我遇到了上述问题。看起来我在 querySelector 中出错了，但我不知道我在这里做错了什么

HTML

<div class="container-wrapper">
<div class="container-fluid">
    <div class="scroller-content">
        <div class="row custom-row">
            <section class="panel red">
                <div class="cover">
                    <strong>One</strong>
                </div>
            </section>
        </div>
        <div class="row custom-row">
            <section class="panel green">
                <div class="cover">
                    <strong>Two</strong>
                </div>
            </section>
        </div>
        <div class="row custom-row">
            <section class="panel blue">
                <div class="cover">
                    <strong>Three</strong>
                </div>
            </section>
        </div>
        <div class="row custom-row">
            <section class="panel orange">
                <div class="cover">
                    <strong>Four</strong>
                </div>
            </section>
        </div>
    </div>
</div>

CSS

<style>
    .panel {
        height: 100%;
        width: 100%;
        position: relative;
        margin: auto;
        padding: 3rem 4rem;
        box-sizing: border-box;
    }

    .red {
        background: #ef5350;
    }

    .green {
        background: #7CB342;
    }

    .blue {
        background: #42A5F5;
    }

    .orange {
        background: #FB8C00;
    }
    .custom-row {
        text-align: center;
    }
    .cover {
        margin: 13rem;
        padding: 13rem;
        top: 50%;
    }
</style>

JS

<script>
$(function () {
    var controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 'onLeave'
        }
    });


    var slides = document.querySelectorAll("section.panel");


    for (var i = 0; i < slides.length; i++) {
        new ScrollMagic.Scene({
            triggerElement: slides[i]
        })
            .setPin(slides[i])
            .addIndicators() // add indicators (requires plugin)
            .addTo(controller);
    }
});

我创建了一个 fiddle代码帮助我弄清楚我在流程中出了什么问题？

Answer 1

只需删除“部分”并将面板类添加到 div。这应该同样有效。你必须改变 document.querySelectorAll("section.panel");到 document.querySelectorAll("div.panel");在 JS 代码中。就这样。

$(function() { // wait for document ready
  // init
  var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
      triggerHook: 'onLeave'
    }
  });

  // get all slides
  var slides = document.querySelectorAll("div.panel");

  // create scene for every slide
  for (var i = 0; i < slides.length; i++) {
    new ScrollMagic.Scene({
        triggerElement: slides[i]
      })
      .setPin(slides[i])
      .addIndicators() // add indicators (requires plugin)
      .addTo(controller);
  }
});

.panel {
  height: 100%;
  width: 100%;
  position: relative;
  margin: auto;
  padding: 3rem 4rem;
  box-sizing: border-box;
}

.red {
  background: #ef5350;
}

.green {
  background: #7CB342;
}

.blue {
  background: #42A5F5;
}

.orange {
  background: #FB8C00;
}

.custom-row {
  text-align: center;
}

.cover {
  margin: 13rem;
  padding: 13rem;
  top: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

<div class="container-wrapper">
  <div class="container-fluid">
    <div class="scroller-content">
      <div class="row custom-row panel red">
        <div class="cover">
          <strong>One</strong>
        </div>
      </div>
      <div class="row custom-row panel green">
        <div class="cover">
          <strong>Two</strong>
        </div>
      </div>
      <div class="row custom-row panel blue">
        <div class="cover">
          <strong>Three</strong>
        </div>
      </div>
      <div class="row custom-row panel orange">
        <div class="cover">
          <strong>Four</strong>
        </div>
      </div>
    </div>
  </div>
</div>

或者检查 fiddle ，这段代码似乎有问题:https://jsfiddle.net/u60gj9hc/1/