如何在我的应用程序的面板部分应用自动滚动？

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 这里放置你的内容 -->
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    <!-- 更多内容 -->
  </div>
</div>

.scroll-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

const content = document.querySelector('.scroll-content');
content.style.animationDuration = '15s'; // 改变滚动速度

npm install react-scroll

import React from 'react';
import { animateScroll as scroll } from 'react-scroll';

class AutoScrollPanel extends React.Component {
  componentDidMount() {
    this.interval = setInterval(() => {
      scroll.scrollToBottom({ duration: 1000 });
    }, 3000); // 每3秒滚动到底部
  }

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

  render() {
    return (
      <div className="scroll-container">
        <div className="scroll-content">
          {/* 这里放置你的内容 */}
          <p>内容1</p>
          <p>Content 2</p>
          <p>Content 3</p>
          {/* 更多内容 */}
        </div>
      </div>
    );
  }
}

export default AutoScrollPanel;