Next.js Image搭配Tailwind实现视差滚动失效，求排查原因

你的代码存在几个关键问题，导致视差效果不生效：

1. 错误混用背景图属性与img标签 #

你给父容器加了bg-fixed这类Tailwind背景图属性，但实际是用Next.js <Image>渲染<img>标签——bg-fixed只对元素的background-image生效，对<img>标签完全不起作用，这是核心问题。

2. 缺少远程图片域名配置 #

你使用的Unsplash远程图片，必须在next.config.js中配置域名白名单，否则Next.js会拦截图片加载，导致图片无法正常显示，自然看不到视差效果：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['images.unsplash.com'],
  },
}

module.exports = nextConfig

3. （可选）Next.js版本适配问题 #

如果你用的是Next.js 13+ App Router，旧版的layout="fill"语法已被废弃，需要改为fill属性（布尔值）：

<Image 
  src="你的图片地址"
  fill
  objectFit="cover"
  alt="test"
  priority={true}
/>

正确实现视差滚动的两种方案 #

方案一：基于CSS Sticky（简单易实现） #

利用position: sticky让图片固定在视口，配合上下滚动内容形成视差：

<div className="min-h-[200vh]">
  {/* 视差图片区域 */}
  <div className="sticky top-0 h-screen w-full overflow-hidden">
    <Image
      src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80"
      fill
      objectFit="cover"
      alt="test"
      priority={true}
    />
  </div>
  {/* 下方滚动内容，用来触发视差 */}
  <div className="h-screen bg-white flex items-center justify-center">
    <p>向下滚动查看视差效果</p>
  </div>
</div>

方案二：基于滚动监听+Transform（自定义程度高） #

通过监听滚动事件，动态调整图片的位移实现视差：

'use client' // App Router下需要加这个标识
import { useState, useEffect } from 'react'
import Image from 'next/image'

export default function ParallaxSection() {
  const [scrollY, setScrollY] = useState(0)

  useEffect(() => {
    const handleScroll = () => {
      // 控制视差强度，数值越小，视差越明显
      setScrollY(window.scrollY * 0.3)
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  return (
    <div className="h-screen relative overflow-hidden">
      <Image
        src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80"
        fill
        objectFit="cover"
        alt="test"
        priority={true}
        style={{ transform: `translateY(${scrollY}px)` }}
      />
      {/* 可选：叠加文字 */}
      <div className="absolute inset-0 flex items-center justify-center text-white text-4xl font-bold">
        视差滚动效果
      </div>
    </div>
  )
}

注意事项 #

• 如果是Pages Router，无需加'use client'标识
• priority={true}只在首屏图片使用，避免影响性能
• 视差效果需要页面有足够的滚动高度（比如设置min-h-[200vh]），否则看不到滚动触发的变化

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