ReactJS中如何根据滚动位置切换图片/视频源？

问题描述 #

需实现滚动时切换媒体源：当页面滚动距离（scrollY）大于100时切换到一个源，大于200时切换到另一个源，现有代码未实现该功能。

原代码问题分析 #

• 未将滚动位置的判断结果与媒体源的src属性绑定，仅存在无效的逻辑块
• 滚动位置判断阈值（>=316）与需求的100、200不匹配
• 导入了未使用的useInView和useRef，属于冗余代码

修正后的代码（视频源切换） #

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

function Video() {
    // 定义视频源
    const videoSrc1 = "https://global-uploads.webflow.com/62efc7cb58ad153bfb146988/6341303c29c5340961dc9ae6_Mco-1-transcode.mp4";
    const videoSrc2 = "https://global-uploads.webflow.com/62efc7cb58ad153bfb146988/63413ff244f1dc616b7148a0_Mco-transcode.mp4";
    const videoSrc3 = "https://global-uploads.webflow.com/62efc7cb58ad153bfb146988/63455a67996ba248148c4e31_add-options%20(3)-transcode.mp4";

    const [scrollPosition, setScrollPosition] = useState(0);

    // 监听滚动事件，更新滚动位置
    const handleScroll = () => {
        setScrollPosition(window.pageYOffset);
    };

    useEffect(() => {
        window.addEventListener('scroll', handleScroll, { passive: true });
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // 根据滚动位置返回对应视频源
    const getCurrentVideoSrc = () => {
        if (scrollPosition > 200) {
            return videoSrc3;
        } else if (scrollPosition > 100) {
            return videoSrc2;
        }
        return videoSrc1;
    };

    return (
        <div className='container'>
            <video loop autoPlay muted className='video'>
                <source src={getCurrentVideoSrc()} type="video/webm" />
            </video>
        </div>
    )
}

export default Video

关键修改点 #

• 新增getCurrentVideoSrc函数，严格按照100、200的阈值返回对应视频源
• 将<source>的src属性绑定到函数返回值，实现滚动时的动态切换
• 移除未使用的useRef和useInView导入，精简代码结构

若需切换图片源的适配代码 #

如果实际需求是切换图片而非视频，只需替换媒体标签和源判断逻辑：

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

function Video() {
    // 定义图片源
    const img1 = 'https://global-uploads.webflow.com/62efc7cb58ad153bfb146988/63455a67996ba248148c4e31_add-options%20(3)-poster-00001.jpg';
    const img2 = 'https://global-uploads.webflow.com/62efc7cb58ad153bfb146988/63413ff244f1dc616b7148a0_Mco-poster-00001.jpg';
    const img3 = 'https://global-uploads.webflow.com/62efc7cb58ad153bfb146988/63455a67996ba248148c4e31_add-options%20(3)-poster-00001.jpg';

    const [scrollPosition, setScrollPosition] = useState(0);

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

    useEffect(() => {
        window.addEventListener('scroll', handleScroll, { passive: true });
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // 根据滚动位置返回对应图片源
    const getCurrentImgSrc = () => {
        if (scrollPosition > 200) {
            return img3;
        } else if (scrollPosition > 100) {
            return img2;
        }
        return img1;
    };

    return (
        <div className='container'>
            <img src={getCurrentImgSrc()} alt="滚动切换图片" className='video' />
        </div>
    )
}

export default Video

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