当前位置：首页 > React

react实现漂浮滚动

2026-01-26 22:23:22React

React 实现漂浮滚动效果

使用 CSS 动画和 React 状态管理实现漂浮滚动效果，可以通过以下方法完成。漂浮效果通常结合滚动事件监听和 CSS 变换实现。

使用 CSS 动画和 React Hooks

定义一个组件，利用 useEffect 监听滚动事件，并通过 CSS 的 transform 属性实现漂浮效果。

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

const FloatingComponent = () => {
  const [offsetY, setOffsetY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setOffsetY(window.pageYOffset);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div 
      className="floating-element"
      style={{
        transform: `translateY(${offsetY * 0.1}px)`
      }}
    >
      漂浮内容
    </div>
  );
};

export default FloatingComponent;

对应的 CSS 文件（FloatingComponent.css）：

.floating-element {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
}

使用 `react-spring` 实现高级动画

react-spring 是一个基于物理的动画库，可以更流畅地实现漂浮效果。

import React, { useState, useEffect } from 'react';
import { useSpring, animated } from 'react-spring';

const FloatingSpringComponent = () => {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const floatingAnimation = useSpring({
    transform: `translateY(${scrollY * 0.1}px)`,
    config: { mass: 1, tension: 200, friction: 10 }
  });

  return (
    <animated.div style={floatingAnimation}>
      漂浮内容（react-spring）
    </animated.div>
  );
};

export default FloatingSpringComponent;

使用 `framer-motion` 实现平滑滚动漂浮

framer-motion 提供更简单的 API 实现复杂的动画效果。

import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

const FloatingFramerComponent = () => {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <motion.div
      style={{ position: 'fixed', top: '50%', left: '50%' }}
      animate={{ y: scrollY * 0.1 }}
      transition={{ type: 'spring', damping: 10 }}
    >
      漂浮内容（framer-motion）
    </motion.div>
  );
};

export default FloatingFramerComponent;

优化性能

滚动事件监听可能频繁触发，可以通过节流（throttle）或防抖（debounce）优化性能。

import { throttle } from 'lodash';

useEffect(() => {
  const handleScroll = throttle(() => {
    setScrollY(window.scrollY);
  }, 100);

  window.addEventListener('scroll', handleScroll);
  return () => {
    handleScroll.cancel();
    window.removeEventListener('scroll', handleScroll);
  };
}, []);