React滚动新闻流实现咨询：有无专用npm包？

嘿，我来帮你搞定这个新闻滚动的需求～

首先说npm包的事儿：虽然没有专门针对“自上而下滚动的新闻流”的专属包，但有不少通用的React组件可以轻松适配你的需求，比如：

• react-slick：它原本是做轮播的，但配置vertical: true就能改成垂直方向滚动，还支持自动播放、循环、暂停等功能，完全能满足你的新闻展示需求
• @trendyol/react-carousel：同样支持垂直滑动模式，配置起来也很简单
• 如果想要更轻量的滚动组件，react-vertical-marquee这类小包也可以试试，专门做垂直滚动的文字展示

要是你不想用第三方包，自己实现其实也挺简单的，用React结合CSS动画或者JS就能搞定，给你举个简单的例子：

方法1：用CSS动画实现自动滚动 #

先写个组件：

import React from 'react';
import './NewsScroll.css';

const NewsScroll = ({ newsItems }) => {
  return (
    <div className="news-container">
      <div className="news-content">
        {/* 渲染新闻项 */}
        {newsItems.map((item, idx) => (
          <div key={idx} className="news-item">{item}</div>
        ))}
        {/* 复制一份新闻，让滚动看起来无缝衔接 */}
        {newsItems.map((item, idx) => (
          <div key={`copy-${idx}`} className="news-item">{item}</div>
        ))}
      </div>
    </div>
  );
};

export default NewsScroll;

然后写对应的CSS：

.news-container {
  height: 200px; /* 设置盒子的固定高度 */
  overflow: hidden;
  border: 1px solid #ddd;
  padding: 0 10px;
}

.news-content {
  /* 自定义滚动速度，10秒滚完一轮 */
  animation: scrollVertical 10s linear infinite;
}

@keyframes scrollVertical {
  0% {
    transform: translateY(0);
  }
  100% {
    /* 因为复制了一份内容，所以只需要向上移动一半高度 */
    transform: translateY(-50%);
  }
}

.news-item {
  padding: 8px 0;
  line-height: 1.6;
}

方法2：用JS控制滚动（更灵活） #

如果需要手动控制滚动（比如鼠标悬停暂停、点击切换），可以用React状态结合requestAnimationFrame来实现：

import React, { useEffect, useRef, useState } from 'react';
import './NewsScroll.css';

const NewsScroll = ({ newsItems, scrollSpeed = 2 }) => {
  const contentRef = useRef(null);
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    let animationId;
    const scroll = () => {
      if (isPaused || !contentRef.current) return;
      // 每次滚动一点点距离
      contentRef.current.scrollTop += scrollSpeed;
      // 滚动到底部时重置到顶部，实现循环
      if (contentRef.current.scrollTop >= contentRef.current.scrollHeight / 2) {
        contentRef.current.scrollTop = 0;
      }
      animationId = requestAnimationFrame(scroll);
    };

    animationId = requestAnimationFrame(scroll);
    return () => cancelAnimationFrame(animationId);
  }, [isPaused, scrollSpeed]);

  return (
    <div 
      className="news-container"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
    >
      <div ref={contentRef} className="news-content">
        {newsItems.map((item, idx) => (
          <div key={idx} className="news-item">{item}</div>
        ))}
        {newsItems.map((item, idx) => (
          <div key={`copy-${idx}`} className="news-item">{item}</div>
        ))}
      </div>
    </div>
  );
};

export default NewsScroll;

这个版本还加了鼠标悬停暂停的功能，体验更好～

总的来说，不管用第三方包还是自己实现都不难，看你需求的复杂度啦。

内容的提问来源于stack exchange，提问作者Poogy