React中如何实现元素移出视口时线性渐变的动态变化？

不用折腾IntersectionObserver的ratio计算，直接用父容器伪元素+渐变遮罩就能搞定，步骤如下：

1. 给滚动父容器添加遮罩样式 #

假设你的滚动父容器类名是TypeList，添加以下样式：

.TypeList {
  position: relative;
  overflow-x: scroll; /* 保留你原有的滚动属性 */
  /* 可根据需求调整左右padding，避免遮罩遮挡核心内容 */
}

/* 左侧边缘渐隐遮罩 */
.TypeList::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40px; /* 遮罩宽度，按需调整 */
  background: linear-gradient(to right, #ffffff, transparent); /* 颜色和页面背景一致 */
  z-index: 1;
}

/* 右侧边缘渐隐遮罩 */
.TypeList::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to left, #ffffff, transparent);
  z-index: 1;
}

2. 简化Card组件样式 #

原Card的背景边框写法可以大幅简化，因为遮罩会覆盖边缘区域，组件的边框、图片、文字都会被渐变自然过渡：

const Card = chakra('div', {
  baseStyle: {
    borderRadius: '10px',
    w: '105px',
    h: '105px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    cursor: 'pointer',
    minW: '105px',
    border: '1px solid red',
    background: 'white',
  },
});

3. 移除冗余的JS监听代码 #

把组件里的useIntersectionObserver、ref、isVisible、ratio这些代码全部删掉，简化后的组件：

function TypeContainer(props: Props) {
  return (
    <Card onClick={() => props.onClickAddNewType(props.type)}>
      <Image
        src={icon}
        w="24px"
        h="26px"
      />
      <Text css={TextStyles}>
        {title}
      </Text>
    </Card>
  );
}

补充说明 #

• 如果是纵向滚动列表，把伪元素的width改成height，渐变方向换成to bottom和to top即可。
• 遮罩的宽度和渐变颜色可以根据页面风格调整，确保和背景色匹配才能达到自然渐隐效果。
• 这个方案纯CSS实现，无需JS监听滚动或元素可见性，性能更优且代码简洁。

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