Как добавить 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, но

stackoverflow.com/questions/50680766/… вот аналогичное обсуждение

— 14.06.2018 21:23

javascript reactjs frontend scrollmagic

03.06.2018 19:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

668

Другие вопросы по теме

Передайте параметры в mapDispatchToProps ()

Как лучше всего хранить, читать и извлекать информацию из гигантского файла json (18 МБ) для использования в моем проекте React.js?

Реакция: как вы можете получить доступ к имени класса родительского компонента от дочернего, не передавая его в качестве реквизита?

Консультации по проекту сайта. Используете React?

React native, как вручную изменить уровень API на 26

Что такое антипаттерн в reactjs?

Добавить подпрограмму для надстройки Office.js Javascript Word с использованием асинхронного контекста выполнения

Как использовать React-router с {this.props.children}

Форма внутри таблицы в react.js

Загрузить изображение в React native из реквизита

Как добавить ScrollMagic для реагирования?

Другие вопросы по теме

Похожие вопросы