React实现滚动时容器可见区域首尾项动态切换透明度方案问询

要实现你描述的滚动时动态透明度效果，纯CSS很难精准判断滚动方向和单个列表项的可见状态，所以我们可以结合React的滚动事件监听+DOM元素位置检测来完成。下面是完整的解决方案：

第一步：修改React组件，添加滚动逻辑和状态管理 #

我们需要跟踪滚动的方向（向上/向下），以及每个列表项的位置信息，这样才能针对性地添加/移除透明度：

class HelloWorld extends React.Component {
  constructor(props){
    super(props);
    this.state={ 
      items: [],
      lastScrollTop: 0, // 记录上一次滚动的位置，用来判断方向
    };
    this.mainContainerRef = React.createRef(); // 容器的引用
    this.itemRefs = []; // 存储每个子项的引用
  }

  componentDidMount (){
    this.setState({
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10", "Item 11", "Item 12"]
    }, () => {
      // 组件挂载后添加滚动监听
      this.mainContainerRef.current.addEventListener('scroll', this.handleScroll);
    });
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    this.mainContainerRef.current?.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const container = this.mainContainerRef.current;
    const { lastScrollTop } = this.state;
    const currentScrollTop = container.scrollTop;
    // 判断滚动方向：currentScrollTop > lastScrollTop 是向下滚，反之向上
    const isScrollingDown = currentScrollTop > lastScrollTop;

    // 获取容器的可见区域范围
    const containerRect = container.getBoundingClientRect();
    const containerTop = containerRect.top;
    const containerBottom = containerRect.bottom;

    // 遍历每个子项，判断是否需要添加透明度
    this.itemRefs.forEach((itemRef) => {
      if (!itemRef) return;
      const itemRect = itemRef.getBoundingClientRect();
      const isItemVisible = itemRect.bottom > containerTop && itemRect.top < containerBottom;

      if (isItemVisible) {
        if (isScrollingDown) {
          // 向下滚动：给顶部可见项加透明，移除底部项的透明
          if (itemRect.top < containerTop + 20) { // 顶部区域阈值，可调整
            itemRef.classList.add('fade-out');
          } else {
            itemRef.classList.remove('fade-out');
          }
        } else {
          // 向上滚动：给底部可见项加透明，移除顶部项的透明
          if (itemRect.bottom > containerBottom - 20) { // 底部区域阈值，可调整
            itemRef.classList.add('fade-out');
          } else {
            itemRef.classList.remove('fade-out');
          }
        }
      } else {
        // 不可见的项移除透明
        itemRef.classList.remove('fade-out');
      }
    });

    // 更新上一次滚动位置
    this.setState({ lastScrollTop: currentScrollTop });
  };

  render() {
    const { items } = this.state;
    return (
      <div>
        <div className="mainContainer" ref={this.mainContainerRef}>
          <div className="childContainer">
            {items.map((match, key) => (
              <div 
                key={key}
                ref={(el) => this.itemRefs[key] = el} // 存储每个子项的引用
                className="list-item"
              >
                {match}
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

第二步：更新SCSS样式，添加透明度类和基础样式 #

我们需要给列表项添加基础样式，以及透明度的过渡效果（让变化更平滑）：

$blue: #a3d5d3;
body {
  background-color: $blue;
}
.mainContainer {
  height: 80px;
  width: 320px;
  overflow-y: auto;
  margin: 0 auto;
  margin-top: 26px;
  position: relative;
  // 隐藏原生滚动条（可选）
  &::-webkit-scrollbar {
    width: 0;
  }
}
.childContainer {
  padding: 5px 0; // 给上下留点空间
}
.list-item {
  padding: 8px 10px;
  margin: 4px 0;
  background: white;
  border-radius: 4px;
  transition: opacity 0.3s ease; // 添加过渡动画
  opacity: 1;
}
// 透明度类
.fade-out {
  opacity: 0.3;
}

关键逻辑解释 #

1. 滚动方向判断：通过对比scrollTop的当前值和上一次值，判断用户是向上还是向下滚动。
2. 可见区域检测：使用getBoundingClientRect()获取容器和子项的位置，判断子项是否在容器的可见范围内。
3. 阈值控制：我们设置了20px的阈值（可根据需求调整），当子项进入容器顶部/底部的这个区域时，添加透明度效果，让过渡更自然。
4. 过渡动画：给列表项添加transition属性，让透明度变化平滑，避免生硬的切换。

效果说明 #

• 向上滚动时：容器底部附近的可见项会逐渐变透明，向上离开底部区域后恢复不透明；上方的项保持不透明。
• 向下滚动时：容器顶部附近的可见项会逐渐变透明，向下离开顶部区域后恢复不透明；下方的项保持不透明。

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