如何解决滚动时渐变背景颜色发生变化的问题

问题核心是你给每个<ColourfulBackground>都设置了background-attachment: fixed，这会让每个元素的渐变背景都相对于浏览器视口固定，滚动时每个元素会截取视口对应位置的渐变片段，导致看起来颜色不连贯且随滚动变化。

修复方案 #

方案一：将渐变背景放在容器上，子元素作为透明“窗口” #

把渐变背景移到<Container>上，让所有子元素只是显示容器背景的对应区域，这样就能实现连贯的渐变效果，且滚动时颜色固定。

修改后的代码：

const ColourfulBackground = styled.div`
  width: 1111px;
  height: 194px;
  /* 子元素设为透明，显示容器的背景 */
  background: transparent;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  row-gap: 48px;
  align-items: center;
  /* 将渐变背景放在容器上，覆盖整个容器高度 */
  background: linear-gradient(180deg, #896bff 0%, #19fbff 100%);
  /* 确保背景随容器滚动，而不是固定视口 */
  background-attachment: scroll;
  /* 让背景覆盖容器所有内容 */
  background-size: 100% 100%;
`;

const Component = () => {
  return (
    <Container>
       {arrayOfItems.map((value) => (
           <>
             <ColourfulBackground />
           </>
       ))}
    </Container>
   )
}

export default Component

方案二：使用背景定位实现连贯切片 #

如果必须在子元素上设置背景，可以通过计算每个子元素的background-position，让渐变背景在每个元素上衔接起来，同时去掉background-attachment: fixed：

const ColourfulBackground = styled.div`
  width: 1111px;
  height: 194px;
  background: linear-gradient(180deg, #896bff 0%, #19fbff 100%);
  background-repeat: no-repeat;
  /* 背景大小设为容器总高度，通过props传递总项数计算 */
  background-size: 100% calc(194px * ${props => props.totalItems} + 48px * ${props => props.totalItems - 1});
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  row-gap: 48px;
  align-items: center;
`;

const Component = () => {
  const totalItems = arrayOfItems.length;
  return (
    <Container>
       {arrayOfItems.map((value, index) => (
           <>
             <ColourfulBackground 
               totalItems={totalItems}
               style={{
                 // 计算每个元素的背景位置，让渐变衔接
                 backgroundPosition: `0 ${-(194 + 48) * index}px`
               }}
             />
           </>
       ))}
    </Container>
   )
}

export default Component

方案对比 #

• 方案一更简洁易维护，推荐使用，适合大多数场景。
• 方案二适合需要单独控制每个子元素背景的特殊场景，但需要动态计算位置和大小，复杂度更高。

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