javascript - 如何防止滚动反应姿势

Question

我添加了一个动画，但它会自动向上滚动我该如何防止它。当它自动渲染反应姿势（动画）时。当你到达底部时，你可以看到它正在上升屏幕。

[在此处输入图像描述][1] 这是 Animation.js

import React, { Component } from "react";
import posed, { PoseGroup } from "react-pose";
import styled from "styled-components";

import shuffle from "./shuffle.js";

const Container = styled.div`
  height: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Item = posed.li({
  enter: { opacity: 1 },
  exit: { opacity: 0 },
});

const StyledItem = styled(Item)`
  padding: 15px;
  list-style-type: none;
  margin: 5px 0px 5px 0px;
  border: 1px solid #e3e3e3;
  background-color: #acff25;
  size=500px;
`;

const ItemList = ({ items }) => (
  <ul>
    <PoseGroup>
      {items.map((item) => (
        <StyledItem key={item.id}>{item.text}</StyledItem>
      ))}
    </PoseGroup>
  </ul>
);

export default class Animation extends Component {
  state = {
    items: [
      { id: 1, text: "En iyi" },
      { id: 2, text: "En güçlü" },
      { id: 3, text: "En istikrarlı" },
      { id: 4, text: "En içten" },
    ],
  };

  _shuffle = () => {
    this.setState({ items: shuffle(this.state.items) });
  };

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  componentDidMount() {
    this.interval = setInterval(this._shuffle, 2000);

    setTimeout(() => {
      this.setState({
        items: this.state.items.concat([
          { id: 5, text: "Yapabilirsin çünkü inanıyorsun" },
        ]),
      });
    }, 3000);

    setTimeout(() => {
      this.setState({
        items: [{ id: 6, text: "En iyisi olacağını biliyorsun" }].concat(
          this.state.items
        ),
      });
    }, 6000);
  }

  render() {
    return (
      <Container>
        <div style={{ height: "500px" }}>
          <ItemList
            items={this.state.items}
            style={{ "text-align": "center" }}
          />
        </div>
      </Container>
    );
  }
}

这是 shuffle.js

    const shuffle = (array) => {
  var currentIndex = array.length,
    temporaryValue,
    randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
};

export default shuffle;

这是 App.js

    import "./App.css";
import Navbar from "./components/Navbar.js";
import Animation from "./components/Animation.js";
function App() {
  return (
    <div className="App">
      <Navbar />
      <div className="list-group col-md-12-row">
        <h3 className="list-group-item">
          <Animation />
        </h3>
      </div>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
      <p>adasd</p>
    </div>
  );
}

export default App;

这是 Navbar.js

import React, { Component } from "react";

export default class Navbar extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-md navbar-dark bg-dark mb-4">
          <div className="container-fluid">
            <a className="navbar-brand" href="https://youtube.com">
              Motivasyon Günlüğü
            </a>
            <button
              className="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarCollapse"
              aria-controls="navbarCollapse"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarCollapse">
              <ul
                className="navbar-nav me-auto mb-2 mb-md-0"
                style={{ marginLeft: "100px" }}
              >
                <li className="nav-item">
                  <a
                    className="nav-link active"
                    aria-current="page"
                    href="https://youtube.com"
                  >
                    Anasayfa
                  </a>
                </li>
                <li className="nav-item" style={{ marginLeft: "20px" }}>
                  <a className="nav-link active" href="https://youtube.com">
                    İletişim
                  </a>
                </li>
                <li className="nav-item" style={{ marginLeft: "20px" }}>
                  <a
                    className="nav-link disabled"
                    href="https://youtube.com"
                    tabIndex="-1"
                    aria-disabled="true"
                  >
                    Youtube
                  </a>
                </li>
              </ul>
              <form className="d-flex flex-row" style={{ marginLeft: "630px" }}>
                <input
                  className="form-control  "
                  type="search"
                  placeholder="Ara"
                  aria-label="Search"
                />
                <button className="btn btn-outline-success" type="submit">
                  Ara
                </button>
              </form>
            </div>
          </div>
        </nav>
      </div>
    );
  }
}```
thanks in advance for your help


  [1]: https://i.stack.imgur.com/REPAF.png