时间戳

首页 > 解决方案 > 如何添加 ScrollMagic 做出反应？

javascript - 如何添加 ScrollMagic 做出反应？

问题描述

起初，我尝试添加 scrollmagic ，componentDidMount()但是当页面重新加载已经起作用时，滚动效果在没有任何滚动的情况下被激活。addIndicators()不起作用，并且在控制台中显示(ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin 'debug.addIndicators'. Please make sure to include plugins/debug.addIndicators.js。添加 SCROLLMAGIC 的问题 我的应用程序使用了 bulma。 

componentDidMount() {
      // Get all "navbar-burger" elements
      var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

      if ($navbarBurgers.length > 0) {
        $navbarBurgers.forEach(function ($el) {
          $el.addEventListener('click', function () {
            var target = $el.dataset.target;
            var $target = document.getElementById(target);
            $el.classList.toggle('is-active');
            $target.classList.toggle('is-active');

          });
      });
    }

    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({
      triggerElement: '#navbarAnchor',
    })
    .setClassToggle('#navbarAnchor', 'switch')
    .addIndicators({
        name: 'switch',
        colorTrigger: 'yellow',
        indent: 200,
        colorStart: 'orange',
        colorEnd: 'pink'
    })
    .addTo(controller);
  }

  render() {
    return (
      <nav ref={controller => this.controller = controller} id="navbarAnchor" className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">

        </div>
        <a role="button" className="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>

        <div className="navbar-menu" id="navMenu">
          <div className="navbar-start">
            <a className="navbar-item">Home</a>

            <div className="navbar-item has-dropdown is-hoverable">
              <a className="navbar-link has-background-none" >
                News
              </a>
              <div className="navbar-dropdown is-boxed has-background-black">
                <a className="navbar-item">
                  Front-End
                </a>
                <a className="navbar-item">
                  Back-End
                </a>
                <a className="navbar-item">
                  Digest
                </a>
                <a className="navbar-item">
                  Soccer
                </a>

              </div>
            </div>
          </div>
          <div className="navbar-end">
                <a className="navbar-item">Get Started</a>
          </div>
        </div>

      </nav>
    );
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>

componentDidMount，但是

标签： javascriptreactjsfrontendscrollmagic

解决方案

推荐阅读