React - 如何删除滚动监听器

Question

在Home Components 中，如果您向下滚动，您将看到 Console 记录一些内容。 这是因为

      .on("progress", function (e) {
        console.log(e.progress);
      });

这是滚动侦听器。

问题是，当我切换到/about或/dashboard等其他页面时，由于console.log(e.progress); ，当我切换到其他页面时，我想摆脱它。

切换到其他页面时如何删除滚动侦听器？

Example.js

import React, { useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import ScrollMagic from "scrollmagic";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  useEffect(() => {
    const scrollController = new ScrollMagic.Controller({
      globalSceneOptions: { triggerHook: "onCenter" }
    });
    const scrollScene = new ScrollMagic.Scene({
      triggerElement: "#pin",
      duration: 2000,
      offset: -50
    })
      .setPin("#pin")
      .on("progress", function (e) {
        console.log(e.progress);
      });
    scrollScene.addTo(scrollController);
  }, []);
  return (
    <React.Fragment id="pin">
      <h2>Home</h2>
      <div style={{ height: "1700px" }}>Another Stuff</div>
    </React.Fragment>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
      <div style={{ height: "1700px" }}>Another Stuff in About</div>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <div style={{ height: "1700px" }}>Another Stuff in Dashboard</div>
    </div>
  );
}

代码沙盒
https://codesandbox.io/s/react-router-basic-forked-tt953?file=/example.js

Answer 1

在 useEffect 的清理中添加 scrollController.removeScene(scrollScene);

  useEffect(() => {
    let scrollController = new ScrollMagic.Controller({
      globalSceneOptions: { triggerHook: "onCenter" }
    });
    let scrollScene = new ScrollMagic.Scene({
      triggerElement: "#pin",
      duration: 2000,
      offset: -50
    })
      .setPin("#pin")
      .on("progress", function (e) {
        console.log(e.progress);
      });
    scrollScene.addTo(scrollController);

    return () => {
      console.log("unmount");
      scrollController.removeScene(scrollScene);
    };
  }, []);

注意：唯一可以传递给 React.Fragment 的属性是 key。 ReactFragment 文档。

当我尝试这个代码沙箱时，它并不总是有效，但是当我下载代码并在我的浏览器上运行它时，它就可以工作了。 不知道为什么。