Scroll上下滚动轮轮播实现

最新推荐文章于 2025-02-25 16:20:02 发布

长剑浣花咻咻咻

最新推荐文章于 2025-02-25 16:20:02 发布

阅读量371

点赞数 1

分类专栏：前端文章标签： react.js react javascript css

本文链接：https://blog.csdn.net/sinat_28071063/article/details/140341055

版权

在这里插入图片描述
如上图，实现功能是，列表上下滚动轮播，用户鼠标移动到列表区域，滚动动画停止，鼠标移开滚动继续。
上述列子用REACT+CSS技术框架实现。
React:

import React, {
    useState, useRef, useEffect } from 'react';
import styles from './index.module.css';

export default function Scroll() {
   
  const [isScroll, setIsScroll] = useState(true); // 用于当鼠标移入时，滚动停止
  const scrollerRef = useRef(null);
  const timer = useRef(null);

  useEffect(() => {
   
    timer.current = setInterval(() => {
   
      if (isScroll && scrollerRef.current)